MatthiasQuintern/imgsort2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve style

Browse Source
This commit is contained in:
matth@ultra 2024-09-01 23:48:37 +02:00
parent 2f6a213e6d
commit 541febceac
6 changed files with 158 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
Makefile
View File

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

6
src/config.html
View File

@ -9,14 +9,14 @@
<body> <body>
<main> <main>
<div class="main-box"> <div class="main-box" style="max-height: 100%">
<button onclick="window.location.href='index.html';" id="configure-button">Go back</button> <button onclick="window.location.href='index.html';" id="configure-button">Go back</button>
<h2>Add mappings</h2> <h2>Add mappings</h2>
A key must be set for each directory, even if it will not be used.<br> A key must be set for each directory, even if it will not be used.<br>
<form class="add-mapping-form" id="addMappingForm"> <form class="add-mapping-form" id="addMappingForm">
<div class="form-row"> <div class="form-row">
<label for="key">Key:</label> <label for="key">Key:</label>
<input type="text" id="key" name="key" required minlength="1" maxlength="1"> <input class="key" type="text" id="key" name="key" required minlength="1" maxlength="1">
</div> </div>
<div class="form-row"> <div class="form-row">
<label for="directory">Directory:</label> <label for="directory">Directory:</label>
@ -29,7 +29,7 @@
</form> </form>
</div> </div>
<div class="second-box"> <div class="second-box" style="max-height: 100%">
<h3>Mappings</h3> <h3>Mappings</h3>
<table id="mappingTable"> <table id="mappingTable">
<thead> <thead>

7
src/index.html
View File

@ -14,8 +14,7 @@
<div class="main-box"> <div class="main-box">
<div class="current-file" id="current-file"> <div class="current-file" id="current-file">
<div class="imgsort2">Imgsort <i>2</i></div> <div class="splash-text">Imgsort <i>2</i></div>
<br>
<button onclick="window.location.href='config.html';" id="configure-button">Configure</button> <button onclick="window.location.href='config.html';" id="configure-button">Configure</button>
<button onclick="setCurrentFile()" id="start">Start</button> <button onclick="setCurrentFile()" id="start">Start</button>
</div> </div>
@ -30,7 +29,9 @@
</div> </div>
<div class="file-list"> <div class="file-list">
Files: Files:
<div class="file-list-content" id="file-list"></div> <div class="file-list-content" id="file-list">
<p class="file-list-item path">No files</p>
</div>
</div> </div>
</div> </div>
</main> </main>

118
src/sass/main.sass
View File

@ -14,10 +14,16 @@ $button-bg-hl: $bg-hl !default
$button-fg: $fg !default $button-fg: $fg !default
$button-fg-hl: $fg-hl !default $button-fg-hl: $fg-hl !default
$font-size: 16px
$monofont: "UbuntuMono", monospace $monofont: "UbuntuMono", monospace
$footer-height: 20px $footer-height: 20px
$footer-padding-y: 2px $footer-padding-y: 2px
$footer-padding-x: 12px $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 font-family: "Ubuntu", Verdana, sans-serif
@ -40,20 +46,52 @@ nav
flex-shrink: 0 flex-shrink: 0
main main
flex-grow: 1 flex-grow: 1 // puts the statusline at the bottom of the page
* *
margin-left: auto margin-left: auto
margin-right: auto margin-right: auto
text-align: center 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 footer
width: 100%
padding: $footer-padding-y $footer-padding-x padding: $footer-padding-y $footer-padding-x
font-size: $footer-height - $footer-padding-y * 2 font-size: $footer-height - $footer-padding-y * 2
background: $fg background: $fg
color: $bg color: $bg
height: 20px height: $footer-height
min-height: $footer-height // idk why but this is required
overflow-x: scroll overflow-x: scroll
overflow-y: hidden overflow-y: hidden
* *
@ -99,8 +137,8 @@ h1, h2
button, input button, input
color: $button-fg color: $button-fg
background-color: $button-bg background-color: $button-bg
font-size: 1rem font-size: $button-font-size
padding: 0.5rem padding: $button-padding
border-radius: 0 border-radius: 0
filter: drop-shadow(0.1rem 0.1rem 0 $accent) filter: drop-shadow(0.1rem 0.1rem 0 $accent)
font-family: $monofont font-family: $monofont
@ -111,8 +149,23 @@ button:hover
color: $button-fg-hl color: $button-fg-hl
background-color: $button-bg-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 .add-mapping-form
margin: auto margin: auto
padding-bottom: $box-margin
width: 400px width: 400px
.form-row .form-row
text-align: left text-align: left
@ -130,20 +183,6 @@ button:hover
// width: 50% // 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 .file-list
width: 90% width: 90%
margin: auto margin: auto
@ -168,45 +207,16 @@ button:hover
color: $bg1 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 // Desktop optimierung
@media only screen and (min-width: 1000px) @media only screen and (min-width: 900px)
main main
display: flex display: flex
flex-direction: row flex-direction: row
padding-bottom: $footer-height
.main-box .main-box
width: 75% width: 75%
max-height: calc(100vh - $footer-height) max-height: calc(100vh - $footer-height)
.imgsort2 .splash-text
font-size: 5rem
line-height: 300px
filter: drop-shadow(0.20rem 0.20rem 0 $accent) filter: drop-shadow(0.20rem 0.20rem 0 $accent)
.second-box .second-box
@ -219,3 +229,9 @@ button:hover
.current-file .current-file
height: 100% height: 100%
width: 100% width: 100%
footer
width: 100%
position: fixed
bottom: 0

130
src/style.css
View File

@ -29,13 +29,48 @@ main * {
text-align: center; text-align: center;
} }
footer { .main-box {
background: #d5c4a1;
}
.current-file {
width: 100%; 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; padding: 2px 12px;
font-size: 16px; font-size: 16px;
background: #3c3836; background: #3c3836;
color: #f9f5d7; color: #f9f5d7;
height: 20px; height: 20px;
min-height: 20px;
overflow-x: scroll; overflow-x: scroll;
overflow-y: hidden; overflow-y: hidden;
} }
@ -88,8 +123,8 @@ h1, h2 {
button, input { button, input {
color: #3c3836; color: #3c3836;
background-color: #f9f5d7; background-color: #f9f5d7;
font-size: 1rem; font-size: 16px;
padding: 0.5rem; padding: 8px;
border-radius: 0; border-radius: 0;
filter: drop-shadow(0.1rem 0.1rem 0 #9d0006); filter: drop-shadow(0.1rem 0.1rem 0 #9d0006);
font-family: "UbuntuMono", monospace; font-family: "UbuntuMono", monospace;
@ -104,29 +139,6 @@ button:hover {
background-color: #ebdbb2; 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 { #start-button {
filter: drop-shadow(0.1rem 0.1rem 0 #79740e); filter: drop-shadow(0.1rem 0.1rem 0 #79740e);
} }
@ -145,6 +157,31 @@ button:hover {
#key { #key {
width: 20px; 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 { .file-list {
@ -179,47 +216,17 @@ button:hover {
color: #ebdbb2; color: #ebdbb2;
} }
.main-box { @media only screen and (min-width: 900px) {
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) {
main { main {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding-bottom: 20px;
} }
.main-box { .main-box {
width: 75%; width: 75%;
max-height: calc(100vh - 20px); max-height: calc(100vh - 20px);
} }
.imgsort2 { .splash-text {
font-size: 5rem;
line-height: 300px;
filter: drop-shadow(0.2rem 0.2rem 0 #9d0006); filter: drop-shadow(0.2rem 0.2rem 0 #9d0006);
} }
.second-box { .second-box {
@ -233,6 +240,11 @@ button:hover {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
footer {
width: 100%;
position: fixed;
bottom: 0;
}
} }
/*# sourceMappingURL=style.css.map */ /*# sourceMappingURL=style.css.map */

1
src/style.css.map
View File

@ -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"}