]> git.ekhem.eu.org Git - gym.git/commitdiff
projects / gym.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 82d727f)
Replace @media with viewport.
authorJakub Czajka <jczajka@google.com>
Sat, 23 Dec 2023 21:36:27 +0000 (22:36 +0100)
committerJakub Czajka <jakub@ekhem.eu.org>
Sun, 31 Dec 2023 11:01:03 +0000 (12:01 +0100)
gym.sh patch | blob | history
insert.sh patch | blob | history
record.sh patch | blob | history

diff --git a/gym.sh b/gym.sh
index b2f3d1f50cb7f1cc80f1203473a1233a758e3ec9..d24277ee7ba0f6756d27338b4d4d487cf0f5b956 100755 (executable)
--- a/gym.sh
+++ b/gym.sh
@@ -14,51 +14,27 @@ format_as() {
 PAGE="
 <!DOCTYPE html>
 <html>
+<meta name='viewport' content='width=device-width'>
 <head>
   <style>
     body {
       background-color: #7fa99b;
-      display: flex;
-      flex-direction: column;
-      white-space: pre-wrap;
     }
     form {
-      max-width: max-content;
+      width: min(400px, 100%);
     }
     fieldset {
-      align-items: center;
       background-color: #f1d18a;
-      column-gap: 15px;
       display: flex;
-    }
-    button, fieldset, input, select {
-      border: 1px solid;
+      flex-direction: column;
+      row-gap: 5px;
     }
     label {
-      align-items: center;
-      column-gap: 15px;
+      column-gap: 5px;
       display: flex;
     }
-    p {
-      font-size: 1.5em;
-      margin: 0;
-    }
-    @media screen and (max-width: 980px) {
-      form {
-        min-width: 98vw;
-      }
-      fieldset {
-        align-items: stretch;
-        flex-direction: column;
-      }
-      button, input, label, legend, select {
-        font-size: 4em;
-        border-width: 4px;
-      }
-      label > input {
-        width: 100%;
-        font-size: 1em;
-      }
+    input[type=date] {
+      width: 100%;
     }
   </style>
 </head>
@@ -71,8 +47,7 @@ PAGE="
         $(echo "${gyms}" | format_as "<option value='{}'>{}</option>")
       </select>
       <label>
-        <p>&#128197;</p>
-        <input type='date' id='date' name='date' required />
+        &#128197;<input type='date' id='date' name='date' required />
       </label>
       <button type='submit'>Record</>
     </fieldset>
diff --git a/insert.sh b/insert.sh
index a5e28178c42b98df2fe36c65aa09c8ee88975008..10835661af541c7e73e0824827d59538e02d2946 100755 (executable)
--- a/insert.sh
+++ b/insert.sh
@@ -23,18 +23,12 @@ echo "Content-Type: text/html"
 echo "
 <!DOCTYPE html>
 <html>
-<head>
+<meta name='viewport' content='width=device-width'>
   <style>
     body {
       white-space: pre-wrap;
     }
-    @media screen and (max-width: 980px) {
-      body {
-        font-size: 2.5em;
-      }
-    }
   </style>
-<head>
 <body>"
 
 case ${RECORD_TYPE} in
diff --git a/record.sh b/record.sh
index 8e575b7683e4b1ca8fddcf3b264fa051bd1659ea..9ef5ea1a5e59c44099074d63ab946a7987317f89 100755 (executable)
--- a/record.sh
+++ b/record.sh
@@ -30,29 +30,28 @@ ORDER BY exercises.id")
 
 format_for_html_input() {
   /usr/bin/awk -F "|" '{printf "\
-<div class='\''container'\''>\
-<label for='\''%s'\''>%s</label>\
-<label for='\''%s'\''>%s</label>\
-<input id='\''%s'\'' name='\''%s'\'' type='\''text'\'' />\
-<label for='\''%s_local_record'\''>\
-<input id='\''%s_local_record'\''\
-       name='\''%s_local_record'\''\
-       type='\''checkbox'\'' />\
- Is gym record?\
-</label>\
-<label for='\''%s_global_record'\''>\
-<input id='\''%s_global_record'\''\
-       name='\''%s_global_record'\''\
-       type='\''checkbox'\'' />\
- Is record?\
-</label>\
-</div>",\
-    $1, $2, $1, $3, $1, $1, $1, $1, $1, $1, $1, $1}'
+<fieldset>\
+  <legend>%s</legend>\
+  <label for='\''%s'\''>%s</label>\
+  <input id='\''%s'\'' name='\''%s'\'' type='\''text'\'' />\
+  <label for='\''%s_local_record'\''>\
+    <input id='\''%s_local_record'\''\
+           name='\''%s_local_record'\''\
+           type='\''checkbox'\'' />Is gym record?\
+  </label>\
+  <label for='\''%s_global_record'\''>\
+    <input id='\''%s_global_record'\''\
+           name='\''%s_global_record'\''\
+           type='\''checkbox'\'' />Is record?\
+  </label>\
+</fieldset>",\
+    $2, $1, $3, $1, $1, $1, $1, $1, $1, $1, $1}'
 }
 
 PAGE="
 <!DOCTYPE html>
 <html>
+<meta name='viewport' content='width=device-width'>
 <head>
   <script>
     window.onbeforeunload = function (event) {
@@ -63,52 +62,16 @@ PAGE="
   <style>
     body {
       background-color: #7fa99b;
-      max-width: max(80vh, 1300px);
-      white-space: pre-wrap;
     }
-    .container {
-      background-color: #f1d18a;
-      display: grid;
-      grid-template-columns: 1fr 1.2fr 1fr 1fr 1fr;
-      margin-bottom: 15px;
-      padding: 15px;
-    }
-    .container, input, button {
-      border: 1px solid;
-    }
-    button {
-      font-size: 1em;
-      min-width: min(30%, 200px);
-      padding: 7px 15px;
+    form {
+      width: min(400px, 100%);
     }
-    form > label {
-      align-items: center;
+    fieldset {
+      background-color: #f1d18a;
       display: flex;
-      column-gap: 15px;
-    }
-    @media screen and (max-width: 980px) {
-      .container {
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-      }
-      .container, input, button {
-        border-width: 4px;
-      }
-      label, input[type=text], button {
-        font-size: 4.5em;
-      }
-      input[type=text] {
-        max-width: 98%;
-      }
-      input[type=number] {
-        font-size: 1em;
-        width: 400px;
-      }
-      input[type=checkbox] {
-        width: 55px;
-        height: 55px;
-      }
+      flex-direction: column;
+      row-gap: 5px;
+      margin: 5px 0;
     }
   </style>
 </head>
@@ -117,8 +80,7 @@ PAGE="
     <input type='hidden' name='gym' value='${GYM}' />
     <input type='hidden' name='date' value='${DATE}' />
     <label>
-      <p>Duration [min]:</p>
-      <input type='number' name='duration' value='0' required />
+      Duration [min]: <input type='number' name='duration' value='0' required />
     </label>
     $(echo "${exercises}" | format_for_html_input)
     <button>Submit</button>
HTTP interface for a database tracking gym progress.