improve style
This commit is contained in:
parent
2f6a213e6d
commit
541febceac
24
Makefile
24
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
|
||||
|
||||
|
||||
@ -9,14 +9,14 @@
|
||||
<body>
|
||||
|
||||
<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>
|
||||
<h2>Add mappings</h2>
|
||||
A key must be set for each directory, even if it will not be used.<br>
|
||||
<form class="add-mapping-form" id="addMappingForm">
|
||||
<div class="form-row">
|
||||
<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 class="form-row">
|
||||
<label for="directory">Directory:</label>
|
||||
@ -29,7 +29,7 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="second-box">
|
||||
<div class="second-box" style="max-height: 100%">
|
||||
<h3>Mappings</h3>
|
||||
<table id="mappingTable">
|
||||
<thead>
|
||||
|
||||
@ -14,8 +14,7 @@
|
||||
|
||||
<div class="main-box">
|
||||
<div class="current-file" id="current-file">
|
||||
<div class="imgsort2">Imgsort <i>2</i></div>
|
||||
<br>
|
||||
<div class="splash-text">Imgsort <i>2</i></div>
|
||||
<button onclick="window.location.href='config.html';" id="configure-button">Configure</button>
|
||||
<button onclick="setCurrentFile()" id="start">Start</button>
|
||||
</div>
|
||||
@ -30,7 +29,9 @@
|
||||
</div>
|
||||
<div class="file-list">
|
||||
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>
|
||||
</main>
|
||||
|
||||
@ -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
|
||||
|
||||
130
src/style.css
130
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 */
|
||||
|
||||
@ -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"}
|
||||
Loading…
Reference in New Issue
Block a user