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

Compare commits

base: MatthiasQuintern:541febceac09e59e5641926d8e4170970e318d54
Branches Tags
MatthiasQuintern:main
..
compare: MatthiasQuintern:e8272ecca0436daeb808a1b947dec421ab022f6b
Branches Tags
MatthiasQuintern:main

No commits in common. "541febceac09e59e5641926d8e4170970e318d54" and "e8272ecca0436daeb808a1b947dec421ab022f6b" have entirely different histories.
541febceac ... e8272ecca0

7 changed files with 129 additions and 164 deletions
Show Stats Expand all files Collapse all files

24
Makefile
View File

@ -17,13 +17,7 @@ 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
@ -38,18 +32,20 @@ $(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 style.css.map _SRC_FLS = config.html config.js index.html index.js imgsort.php style.css
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)/%
@ -62,16 +58,19 @@ $(INSTALL_DIR)/%: $(SRC_DIR)/%
clean: clean:
rm $(INSTALL_FLS) rm $(INSTALL_FLS)
# Compile the sass
css:
$(SASS_CMD) --no-indented --no-source-map src/sass/main.sass src/style.css # testing
# 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.
@ -80,4 +79,3 @@ 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" style="max-height: 100%"> <div class="main-box">
<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 class="key" type="text" id="key" name="key" required minlength="1" maxlength="1"> <input 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" style="max-height: 100%"> <div class="second-box">
<h3>Mappings</h3> <h3>Mappings</h3>
<table id="mappingTable"> <table id="mappingTable">
<thead> <thead>

7
src/index.html
View File

@ -14,7 +14,8 @@
<div class="main-box"> <div class="main-box">
<div class="current-file" id="current-file"> <div class="current-file" id="current-file">
<div class="splash-text">Imgsort <i>2</i></div> <div class="imgsort2">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>
@ -29,9 +30,7 @@
</div> </div>
<div class="file-list"> <div class="file-list">
Files: Files:
<div class="file-list-content" id="file-list"> <div class="file-list-content" id="file-list"></div>
<p class="file-list-item path">No files</p>
</div>
</div> </div>
</div> </div>
</main> </main>

7
src/index.js
View File

@ -6,7 +6,6 @@ const mappings = new Map(JSON.parse(localStorage.getItem('mappings')) || []);
let statusLine = document.getElementById('status'); let statusLine = document.getElementById('status');
// store for when done with sorting TODO display // store for when done with sorting TODO display
let splash = document.getElementById('current-file').innerHTML; let splash = document.getElementById('current-file').innerHTML;
let noFiles = document.getElementById('file-list').innerHTML;
let history = []; let history = [];
@ -88,10 +87,6 @@ function renderMoveButtons() {
function renderFileList() { function renderFileList() {
const fileListDiv = document.getElementById('file-list'); const fileListDiv = document.getElementById('file-list');
if (fileList.length == 0) {
fileListDiv.innerHTML = noFiles;
return;
}
fileListDiv.innerHTML = ''; fileListDiv.innerHTML = '';
fileList.forEach(file => { fileList.forEach(file => {
const p = document.createElement('p'); const p = document.createElement('p');
@ -100,7 +95,7 @@ function renderFileList() {
classes += " selected-file-list-item"; classes += " selected-file-list-item";
} }
p.setAttribute("class", classes) p.setAttribute("class", classes)
p.textContent = file; p.innerHTML = file;
fileListDiv.appendChild(p); fileListDiv.appendChild(p);
}); });
} }

118
src/sass/main.sass
View File

@ -14,16 +14,10 @@ $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
@ -46,52 +40,20 @@ nav
flex-shrink: 0 flex-shrink: 0
main main
flex-grow: 1 // puts the statusline at the bottom of the page flex-grow: 1
* *
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: $footer-height height: 20px
min-height: $footer-height // idk why but this is required
overflow-x: scroll overflow-x: scroll
overflow-y: hidden overflow-y: hidden
* *
@ -137,8 +99,8 @@ h1, h2
button, input button, input
color: $button-fg color: $button-fg
background-color: $button-bg background-color: $button-bg
font-size: $button-font-size font-size: 1rem
padding: $button-padding padding: 0.5rem
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
@ -149,23 +111,8 @@ 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
@ -181,8 +128,22 @@ button:hover
button button
margin-left: 0 margin-left: 0
// 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
@ -207,16 +168,45 @@ 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: 900px) @media only screen and (min-width: 1000px)
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)
.splash-text .imgsort2
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
@ -229,9 +219,3 @@ 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,48 +29,13 @@ main * {
text-align: center; text-align: center;
} }
.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 { footer {
width: 100%;
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;
} }
@ -123,8 +88,8 @@ h1, h2 {
button, input { button, input {
color: #3c3836; color: #3c3836;
background-color: #f9f5d7; background-color: #f9f5d7;
font-size: 16px; font-size: 1rem;
padding: 8px; padding: 0.5rem;
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;
@ -139,6 +104,29 @@ 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);
} }
@ -157,31 +145,6 @@ 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 {
@ -216,17 +179,47 @@ button:hover {
color: #ebdbb2; color: #ebdbb2;
} }
@media only screen and (min-width: 900px) { .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) {
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);
} }
.splash-text { .imgsort2 {
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 {
@ -240,11 +233,6 @@ 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 Normal file
View File

@ -0,0 +1 @@
{"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"}