refac: Improve appearence of the web interface

Nikolay-Lysenko · Feb 25, 2024 · ca9e1c1 · ca9e1c1
1 parent dd7f3bd
commit ca9e1c1
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 34 deletions.
diff --git a/readingbricks/static/css/baseline_style.css b/readingbricks/static/css/baseline_style.css
@@ -43,27 +43,41 @@ h2 a:link, h2 a:visited {
     text-decoration: none;
 }
 
+/* Buttons */
+.button {
+    background-color: #f7f7fc;
+    border: none;
+    color: black;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+}
+.button:link, .button:visited {
+    color: black;
+}
+
 /* Custom divisions */
 #frozen_button_one {
     position: fixed;
-    top: 2.5%;
-    left: 2.5%;
-    width: 10%;
-    text-align: left;
+    top: 25px;
+    left: 25px;
+    width: 100px;
 }
 #frozen_button_two {
     position: fixed;
-    top: 10%;
-    left: 2.5%;
-    width: 10%;
-    text-align: left;
+    top: 100px;
+    left: 25px;
+    width: 100px;
 }
 #frozen_button_three {
     position: fixed;
-    top: 17.5%;
-    left: 2.5%;
-    width: 10%;
-    text-align: left;
+    top: 175px;
+    left: 25px;
+    width: 100px;
 }
 #central {
     background-color: #f9f9f9;
@@ -91,7 +105,14 @@ h2 a:link, h2 a:visited {
 #contents {
     margin: auto;
     padding-top: 1%;
-    padding-bottom: 1%;
+    padding-bottom: 2%;
+    width: 95%;
+    max-width: 1000px;
+}
+#short_contents {
+    margin: auto;
+    padding-top: 1%;
+    padding-bottom: 5%;
     width: 95%;
     max-width: 1000px;
 }
@@ -105,6 +126,7 @@ h2 a:link, h2 a:visited {
     margin: auto;
     margin-top: 20%;
     text-align: center;
+    padding-top: 1%;
     padding-bottom: 1%;
     width: 95%;
 }
@@ -115,20 +137,3 @@ h2 a:link, h2 a:visited {
     padding-bottom: 5%;
     width: 95%;
 }
-
-/* Buttons */
-.button {
-    background-color: #f7f7fc;
-    border: none;
-    color: black;
-    padding: 15px 32px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 16px;
-    margin: 4px 2px;
-    cursor: pointer;
-}
-.button:link, .button:visited {
-    color: black;
-}
diff --git a/readingbricks/templates/404.html b/readingbricks/templates/404.html
@@ -9,7 +9,7 @@
         <nav id="frozen_button_one"><a href="{{ url_for('index') }}" class="button">/</a></nav>
         <nav id="frozen_button_two"><a href="{{ url_for('about') }}" class="button">?</a></nav>
         <div id="central">
-            <div id="contents">
+            <div id="short_contents">
                 <h2>Страница не найдена. Проверьте правильность написания адреса.</h2>
             </div>
         </div>

diff --git a/readingbricks/templates/about.html b/readingbricks/templates/about.html
@@ -8,7 +8,7 @@
     <body>
         <nav id="frozen_button_one"><a href="{{ url_for('index') }}" class="button">/</a></nav>
         <div id="central">
-            <div id="contents">
+            <div id="short_contents">
                 <h2>Обзор интерфейса</h2>
                 <p>Когда-нибудь он будет написан... А пока можно обратиться к <a href="https://github.com/Nikolay-Lysenko/readingbricks/blob/master/README.md#interface-guide">README.md</a> из GitHub-репозитория этого проекта.</p>
             </div>

diff --git a/readingbricks/templates/empty_result.html b/readingbricks/templates/empty_result.html
@@ -10,7 +10,7 @@
         <nav id="frozen_button_two"><a href="{{ field_url }}" class="button">⌂</a></nav>
         <nav id="frozen_button_three"><a href="{{ url_for('about') }}" class="button">?</a></nav>
         <div id="central">
-            <div id="contents">
+            <div id="short_contents">
                 <h2>Ничего не найдено</h2>
                 <p>Введён следующий запрос:</p>
                 <p><span style="background-color: #f1ece8">{{ query }}</span></p>

diff --git a/readingbricks/templates/invalid_query.html b/readingbricks/templates/invalid_query.html
@@ -10,7 +10,7 @@
         <nav id="frozen_button_two"><a href="{{ field_url }}" class="button">⌂</a></nav>
         <nav id="frozen_button_three"><a href="{{ url_for('about') }}" class="button">?</a></nav>
         <div id="central">
-            <div id="contents">
+            <div id="short_contents">
                 <h2>Запрос не может быть обработан</h2>
                 <p>Введён следующий запрос:</p>
                 <p><span style="background-color: #f1ece8">{{ query }}</span></p>