diff --git a/Makefile b/Makefile index 8db0bd1..b938c0f 100644 --- a/Makefile +++ b/Makefile @@ -17,7 +17,13 @@ STAGING_DIR = .sort # INSTALL_DIR = + + # DO NOT CHANGE ANYTHING HERE +default: css +.PHONY: clean install stop test php css + +# Installation ifndef ROOT_DIR $(error Edit this Makefile and set the ROOT_DIR variable) endif @@ -32,20 +38,18 @@ $(error Edit this Makefile and set the ROOT_PATH variable) endif SRC_DIR = src -_SRC_FLS = config.html config.js index.html index.js imgsort.php style.css +_SRC_FLS = config.html config.js index.html index.js imgsort.php style.css style.css.map SRC_FLS = $(foreach f,$(_SRC_FLS),$(SRC_DIR)/$(f)) INSTALL_FLS = $(foreach f,$(_SRC_FLS),$(INSTALL_DIR)/$(f)) SASS_CMD = sass --color --load-path=src/sass -default: css -.PHONY: clean install stop test php css install: $(INSTALL_FLS) imgsort2-nginx.conf imgsort2-php-fpm.conf $(INSTALL_DIR)/%.php: $(SRC_DIR)/%.php - sed 's|$$rootDir = .*|$$rootDir = "$(ROOT_DIR)/";|; s|$$rootPath = .*|$$rootPath = "$(ROOT_PATH)/"|; s|$$stagingDirName = .*|$$stagingDirName = "$(STAGING_DIR)/";|' $< > $@ + sed 's|$$rootDir = .*|$$rootDir = "$(ROOT_DIR)/";|; s|$$rootPath = .*|$$rootPath = "$(ROOT_PATH)/";|; s|$$stagingDirName = .*|$$stagingDirName = "$(STAGING_DIR)/";|' $< > $@ chmod 0744 $@ $(INSTALL_DIR)/%: $(SRC_DIR)/% @@ -58,19 +62,16 @@ $(INSTALL_DIR)/%: $(SRC_DIR)/% clean: rm $(INSTALL_FLS) - - -# testing +# Compile the sass +css: + $(SASS_CMD) --no-indented --no-source-map src/sass/main.sass src/style.css +# Testing php: php -S localhost:8000 -t . & firefox http://localhost:8000/src/index.html stop: -killall php -# Compile the sass -css: - $(SASS_CMD) --no-indented src/sass/main.sass src/style.css - TESTDIR = images # Create a image directory for testing. @@ -79,3 +80,4 @@ test: -@rm -r $(TESTDIR) -@mkdir -p $(TESTDIR) $(TESTDIR)/.sort -@cp resources/* $(TESTDIR)/.sort + diff --git a/src/config.html b/src/config.html index 86a288f..9ee97e5 100644 --- a/src/config.html +++ b/src/config.html @@ -9,14 +9,14 @@
-
+

Add mappings

A key must be set for each directory, even if it will not be used.
- +
@@ -29,7 +29,7 @@
-
+

Mappings

diff --git a/src/index.html b/src/index.html index 4b7ccc3..9b10520 100644 --- a/src/index.html +++ b/src/index.html @@ -14,8 +14,7 @@
-
Imgsort 2
-
+
Imgsort 2
@@ -30,7 +29,9 @@
Files: -
+
+

No files

+
diff --git a/src/sass/main.sass b/src/sass/main.sass index 69b8b34..e510d21 100644 --- a/src/sass/main.sass +++ b/src/sass/main.sass @@ -14,10 +14,16 @@ $button-bg-hl: $bg-hl !default $button-fg: $fg !default $button-fg-hl: $fg-hl !default +$font-size: 16px $monofont: "UbuntuMono", monospace $footer-height: 20px $footer-padding-y: 2px $footer-padding-x: 12px +$box-margin: 0.4rem +$file-height: 300px +$splash-font-size: 40px +$button-font-size: $font-size +$button-padding: 8px * font-family: "Ubuntu", Verdana, sans-serif @@ -40,20 +46,52 @@ nav flex-shrink: 0 main - flex-grow: 1 + flex-grow: 1 // puts the statusline at the bottom of the page * margin-left: auto margin-right: auto text-align: center +.main-box + background: $bg2 +.current-file + width: 100% + height: $file-height + position: relative + overflow: scroll + background: $bg1 + + .splash-text + font-size: $splash-font-size + padding-top: calc(($file-height - $splash-font-size - $button-font-size - 2 * $button-padding - 20px) / 2) + padding-bottom: 20px + // padding-bottom: ($file-height - $splash-font-size - $button-font-size - 2 * $button-padding) / 2 + filter: drop-shadow(0.10rem 0.10rem 0 $accent) + + img, video, audio + max-width: 100% + max-height: 100% + width: auto + height: auto + position: absolute + top: 0 + bottom: 0 + left: 0 + right: 0 + margin: auto + +.second-box + margin-top: $box-margin + margin-bottom: $box-margin + footer - width: 100% padding: $footer-padding-y $footer-padding-x font-size: $footer-height - $footer-padding-y * 2 background: $fg color: $bg - height: 20px + height: $footer-height + min-height: $footer-height // idk why but this is required overflow-x: scroll overflow-y: hidden * @@ -99,8 +137,8 @@ h1, h2 button, input color: $button-fg background-color: $button-bg - font-size: 1rem - padding: 0.5rem + font-size: $button-font-size + padding: $button-padding border-radius: 0 filter: drop-shadow(0.1rem 0.1rem 0 $accent) font-family: $monofont @@ -111,8 +149,23 @@ button:hover color: $button-fg-hl background-color: $button-bg-hl +#start-button + filter: drop-shadow(0.1rem 0.1rem 0 $light-green) +#configure-button + filter: drop-shadow(0.1rem 0.1rem 0 $light-blue) +#undo-button + filter: drop-shadow(0.1rem 0.1rem 0 $light-gray) +#skip-button + filter: drop-shadow(0.1rem 0.1rem 0 $light-gray) +#key + width: 20px + text-align: center + // #directory + + .add-mapping-form margin: auto + padding-bottom: $box-margin width: 400px .form-row text-align: left @@ -128,22 +181,8 @@ button:hover button margin-left: 0 // width: 50% - - -#start-button - filter: drop-shadow(0.1rem 0.1rem 0 $light-green) -#configure-button - filter: drop-shadow(0.1rem 0.1rem 0 $light-blue) -#undo-button - filter: drop-shadow(0.1rem 0.1rem 0 $light-gray) -#skip-button - filter: drop-shadow(0.1rem 0.1rem 0 $light-gray) -#key - width: 20px - // #directory - .file-list width: 90% margin: auto @@ -168,45 +207,16 @@ button:hover color: $bg1 -.main-box - background: $bg2 -.current-file - width: 100% - height: 300px - position: relative - overflow: scroll - background: $bg1 - - .imgsort2 - font-size: 3rem - line-height: 200px - filter: drop-shadow(0.10rem 0.10rem 0 $accent) - - img, video, audio - max-width: 100% - max-height: 100% - width: auto - height: auto - position: absolute - top: 0 - bottom: 0 - left: 0 - right: 0 - margin: auto - - - // Desktop optimierung -@media only screen and (min-width: 1000px) +@media only screen and (min-width: 900px) main display: flex flex-direction: row + padding-bottom: $footer-height .main-box width: 75% max-height: calc(100vh - $footer-height) - .imgsort2 - font-size: 5rem - line-height: 300px + .splash-text filter: drop-shadow(0.20rem 0.20rem 0 $accent) .second-box @@ -219,3 +229,9 @@ button:hover .current-file height: 100% width: 100% + + + footer + width: 100% + position: fixed + bottom: 0 diff --git a/src/style.css b/src/style.css index 0847aed..07ea48f 100644 --- a/src/style.css +++ b/src/style.css @@ -29,13 +29,48 @@ main * { text-align: center; } -footer { +.main-box { + background: #d5c4a1; +} + +.current-file { width: 100%; + height: 300px; + position: relative; + overflow: scroll; + background: #ebdbb2; +} +.current-file .splash-text { + font-size: 40px; + padding-top: 104px; + padding-bottom: 20px; + filter: drop-shadow(0.1rem 0.1rem 0 #9d0006); +} +.current-file img, .current-file video, .current-file audio { + max-width: 100%; + max-height: 100%; + width: auto; + height: auto; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.second-box { + margin-top: 0.4rem; + margin-bottom: 0.4rem; +} + +footer { padding: 2px 12px; font-size: 16px; background: #3c3836; color: #f9f5d7; height: 20px; + min-height: 20px; overflow-x: scroll; overflow-y: hidden; } @@ -88,8 +123,8 @@ h1, h2 { button, input { color: #3c3836; background-color: #f9f5d7; - font-size: 1rem; - padding: 0.5rem; + font-size: 16px; + padding: 8px; border-radius: 0; filter: drop-shadow(0.1rem 0.1rem 0 #9d0006); font-family: "UbuntuMono", monospace; @@ -104,29 +139,6 @@ button:hover { background-color: #ebdbb2; } -.add-mapping-form { - margin: auto; - width: 400px; -} -.add-mapping-form .form-row { - text-align: left; -} -.add-mapping-form .form-row * { - text-align: left; -} -.add-mapping-form .form-row label { - display: inline-block; - width: 100px; - text-align: right; -} -.add-mapping-form .form-row input { - margin-left: 0; - text-align: left; -} -.add-mapping-form .form-row button { - margin-left: 0; -} - #start-button { filter: drop-shadow(0.1rem 0.1rem 0 #79740e); } @@ -145,6 +157,31 @@ button:hover { #key { width: 20px; + text-align: center; +} + +.add-mapping-form { + margin: auto; + padding-bottom: 0.4rem; + width: 400px; +} +.add-mapping-form .form-row { + text-align: left; +} +.add-mapping-form .form-row * { + text-align: left; +} +.add-mapping-form .form-row label { + display: inline-block; + width: 100px; + text-align: right; +} +.add-mapping-form .form-row input { + margin-left: 0; + text-align: left; +} +.add-mapping-form .form-row button { + margin-left: 0; } .file-list { @@ -179,47 +216,17 @@ button:hover { color: #ebdbb2; } -.main-box { - background: #d5c4a1; -} - -.current-file { - width: 100%; - height: 300px; - position: relative; - overflow: scroll; - background: #ebdbb2; -} -.current-file .imgsort2 { - font-size: 3rem; - line-height: 200px; - filter: drop-shadow(0.1rem 0.1rem 0 #9d0006); -} -.current-file img, .current-file video, .current-file audio { - max-width: 100%; - max-height: 100%; - width: auto; - height: auto; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - margin: auto; -} - -@media only screen and (min-width: 1000px) { +@media only screen and (min-width: 900px) { main { display: flex; flex-direction: row; + padding-bottom: 20px; } .main-box { width: 75%; max-height: calc(100vh - 20px); } - .imgsort2 { - font-size: 5rem; - line-height: 300px; + .splash-text { filter: drop-shadow(0.2rem 0.2rem 0 #9d0006); } .second-box { @@ -233,6 +240,11 @@ button:hover { height: 100%; width: 100%; } + footer { + width: 100%; + position: fixed; + bottom: 0; + } } /*# sourceMappingURL=style.css.map */ diff --git a/src/style.css.map b/src/style.css.map deleted file mode 100644 index e3ea690..0000000 --- a/src/style.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sourceRoot":"","sources":["sass/main.sass","sass/gruvbox_light.sass"],"names":[],"mappings":"AAqBA;EACE;EACA,OCLI;;;ADQN;EACE;EACA;;;AAEF;EACE,kBCxBS;ED0BT;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;AACA;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA,YCnCI;EDoCJ,OC/CS;EDgDT;EACA;EACA;;AACA;EACE,OCpDO;;;ADqDX;EACE,aA7C0B;EA8C1B;;AACA;EACE,aAhDwB;;;AAmD5B;EACE,OCrDI;;;ADuDN;EACE,aAvD0B;;;AAyD5B;EACE;EACA,YCzDI;ED0DJ,OCtEI;EDuEJ;EACA;EACA,cC/DS;EDgET;;;AAKF;EACE,OCpEI;EDqEJ,aAvE0B;EAwE1B;;;AAEF;EACE,OC1DU;;;AD4DZ;EACE;EACA;EACA;;;AAEF;EACE,OCjFI;EDkFJ,kBC7FS;ED8FT;EACA;EACA;EACA;EACA,aAzF0B;EA0F1B;;AACA;EACE;;;AACJ;EACE,OC/FI;EDgGJ,kBCtGI;;;ADwGN;EACE;EACA;;AACA;EACE;;AACA;EACE;;AACF;EACE;EACA;EACA;;AACF;EACE;EACA;;AACF;EACE;;;AAMN;EACE;;;AACF;EACE;;;AACF;EACE;;;AACF;EACE;;;AACF;EACE;;;AAGF;EACE;EACA;EACA;;;AACF;EACE;EACA,cC7HU;ED8HV;EACA;EACA;;AACA;EACE;EACA;EACA;;;AACJ;EACE,YCxJI;;;ADyJN;EACE,YCzJI;;;AD2JN;EACE;EACA,OC9JI;;;ADiKN;EACE,YCjKI;;;ADkKN;EACE;EACA;EACA;EACA;EACA,YCxKI;;AD0KJ;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKJ;EACE;IACE;IACA;;EACF;IACE;IACA;;EACF;IACE;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA","file":"style.css"} \ No newline at end of file