get the design working on phones
- ID
7829916- date
2022-05-03 22:32:09+00:00- author
Alex Chan <alex@alexwlchan.net>- parent
7f6f056- message
get the design working on phones- changed files
3 files, 114 additions, 46 deletions
Changed files
webapp/server.py (1928) → webapp/server.py (1963)
diff --git a/webapp/server.py b/webapp/server.py
index 55b3c84..2fba28c 100755
--- a/webapp/server.py
+++ b/webapp/server.py
@@ -49,7 +49,7 @@ def get_palette():
# when running dominant_colours.
tmp_file.flush()
- result = subprocess.check_output(['dominant_colours', tmp_file.name, '--no-palette'])
+ result = subprocess.check_output(['dominant_colours', tmp_file.name, '--no-palette', '--max-colours=5'])
colours = result.decode('utf8').strip().split('\n')
with tempfile.NamedTemporaryFile(suffix='jpg') as thumbnail_file:
@@ -63,4 +63,4 @@ def get_palette():
if __name__ == "__main__":
- app.run(debug=True)
+ app.run(debug=True, host='0.0.0.0')
webapp/templates/index.html (220) → webapp/templates/index.html (408)
diff --git a/webapp/templates/index.html b/webapp/templates/index.html
index 05091c5..8cff40c 100644
--- a/webapp/templates/index.html
+++ b/webapp/templates/index.html
@@ -1,4 +1,10 @@
<html>
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+
+</head>
<body>
<form action = "/palette" method = "POST"
enctype = "multipart/form-data">
webapp/templates/palette.html (1605) → webapp/templates/palette.html (3058)
diff --git a/webapp/templates/palette.html b/webapp/templates/palette.html
index 2d3d0a7..057fbe2 100644
--- a/webapp/templates/palette.html
+++ b/webapp/templates/palette.html
@@ -1,63 +1,134 @@
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+
+</head>
+
+<h1>dominant colours</h1>
+
<style>
- .colour {
+/* .colour {
width: calc(250px - 1em - .5em);
/* text-align: center;*/
padding: 5px;
- font-family: monospace;
+
/* margin: .25em;*/
- border-radius: 5px;
- font-size: 150%;
+/* border-radius: 5px;*/
- margin-left: auto;
- margin-right: auto;
- }
- #results {
- margin-top: 1em;
- }
+/* margin-left: auto;*/
+/* margin-right: auto;*/
+ }*/
main {
- max-width: 700px;
+/* max-width: 700px;*/
+/* margin-left: auto;*/
+/* margin-right: auto;*/
+/* text-align: center;*/
+ }
+
+ #results {
+/* margin-top: 1em;*/
+ display: grid;
+ grid-template-columns: 325px 48px auto;
+ grid-template-rows: repeat(5, 48px);
+ grid-gap: 15px;
+ height: 300px;
+ width: 600px;
margin-left: auto;
margin-right: auto;
-/* text-align: center;*/
}
.thumbnail {
- border: 1px solid #999;
+/* border: 4px solid #999;*/
+ grid-row: 1 / span 5;
+ grid-column: 1 / 3;
width: 300px;
height: 300px;
- padding: 10px;
+ background: #ddd;
+/* margin: -4px;*/
}
img {
- width: 300px;
- height: 300px;
+ width: 100%;
+ height: 100%;
object-fit: contain;
}
- .colour {
- display: grid;
-/* background: yellow;*/
- grid-template-columns: 30px auto;
- grid-gap: 12px;
- }
-
.sample {
grid-column: 1 / 2;
-/* background: green;*/
}
.label {
- grid-column: 2 / 2;
- height: 30px;
-/* background: blue;*/
+ font-family: monospace;
+ font-size: 170%;
+ height: 48px;
+ line-height: 48px;
}
.sample {
- width: 30px;
- height: 30px;
- border: 1px solid black;
+ width: 48px;
+ height: 48px;
+ border: 2px solid black;
+/* margin: -2px;*/
+ grid-column: 2 / 3;
+ }
+
+ .label {
+ grid-column: 3 / 3;
+ }
+
+ #label_1, #sample_1 { grid-row: 1 / 5; }
+ #label_2, #sample_2 { grid-row: 2 / 5; }
+ #label_3, #sample_3 { grid-row: 3 / 5; }
+ #label_4, #sample_4 { grid-row: 4 / 5; }
+ #label_5, #sample_5 { grid-row: 5 / 5; }
+
+ @media screen and (max-width: 600px) {
+ .thumbnail {
+ width: 300px;
+ height: 230px;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ #results {
+ grid-template-columns: 42px auto;
+ width: 300px;
+ grid-template-rows: 240px repeat(5, 42px);
+ grid-row-gap: 10px;
+ height: auto;
+ }
+
+ .thumbnail {
+ grid-column: 1 / span 2;
+ grid-row:1 / 6;
+ }
+
+ .sample {
+ grid-column: 1 / 2;
+ }
+
+ .label {
+ grid-column: 2 / 2;
+ }
+
+ #label_1, #sample_1 { grid-row: 2 / 6; }
+ #label_2, #sample_2 { grid-row: 3 / 6; }
+ #label_3, #sample_3 { grid-row: 4 / 6; }
+ #label_4, #sample_4 { grid-row: 5 / 6; }
+ #label_5, #sample_5 { grid-row: 6 / 6; }
+
+ .label {
+ height: 42px;
+ line-height: 42px;
+ }
+
+ .sample {
+ width: 42px;
+ height: 42px;
+ }
}
</style>
@@ -66,21 +137,12 @@
<div class="thumbnail">
<img src="{{ thumbnail_data_uri }}">
</div>
- <div class="palette">
- {% for c in colours %}
- <div class="colour">
- <div class="sample" style="background: {{ c }}"></div>
- <div class="label">{{ c }}</div>
- </div>
- {% endfor %}
- </div>
+ {% for c in colours %}
+ <div class="sample" id="sample_{{ loop.index }}" style="background: {{ c }};"></div>
+ <div class="label" id="label_{{ loop.index }}">{{ c }}</div>
+ {% endfor %}
</div>
- <p>Try another image:</p>
- <form action = "/palette" method = "POST"
- enctype = "multipart/form-data">
- <input type = "file" name = "file" />
- <input type = "submit"/>
- </form>
+ <p><a href="/">try another image</a></p>
</main>