more unstructured css wrangling

library/app.py

@@ -54,6 +54,10 @@ def create_app():
     def update():
         index_books(APP.config["LIBRARY_FILENAME"], APP.config["IMAGE_FOLDER"])
 
+    @APP.context_processor
+    def inject_title():
+        return dict(title=APP.config["TITLE"])
+
     return APP
 
 

library/static/css/dropdown.css

@@ -1,26 +1,21 @@
 /* Dropdown Button */
 /* for sorting on Year, Type, License
 */
+.menu {
+  display:flex;
+  gap: 0.3em;
+  position: relative;
+  margin-left: 1em;
+}
 .filter {
   display: none;
 }
-
 .activebtn {
 	background-color: #62b264;
 }
-
-#leftmostbtn{
-  margin-left: 1em;
-}
-
 .show {
   display: block;
 }
-.dropdown {
-  position: relative;
-  display: inline-block;
-}
-
 /* Dropdown Content (Hidden by Default) */
 .dropdown-content {
   display: none;
@@ -41,7 +36,7 @@
   text-decoration: none;
   display: block;
 }
-.dropbtn {
+.dropbtn .dropdown {
   margin-top: 1em;
 }
 /* Change color of dropdown links on hover */
@@ -54,6 +49,30 @@
 /* Change the background color of the dropdown button when the dropdown content is shown */
 .dropdown:hover .dropbtn {background-color: #3e8e41;}
 
+#booksearch{
+  background: #f1f1f1;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  border: 3px solid black;
+  font-family: inherit;
+  font-size: 100%;
+  box-shadow: 0.3em 0.35em rgba(0,0,0,0.3);
+}
+
+button {
+  border: 3px solid black;
+  padding: 0.8em;
+  color: black;
+  min-width: auto;
+  background-color: #f1f1f1;
+  font-family: inherit;
+  font-size: 100%;
+  box-shadow: 0.3em 0.35em rgba(0,0,0,0.3);
+  cursor: pointer;
+}
+
 @media only screen and (min-device-width: 320px) and (max-device-width: 480px)  {
   .dropdown-content button {
       font-size: 0.7em;

library/static/css/feather.css

@@ -2,7 +2,7 @@
   width: 24px;
   height: 24px;
   stroke: currentColor;
-  stroke-width: 2;
+  stroke-width: 1.5;
   stroke-linecap: round;
   stroke-linejoin: round;
   fill: none;

library/static/css/style.css

@@ -1,46 +1,21 @@
+@font-face {
+	font-family: "libreBaskerville";
+	src: url(../fonts/LibreBaskerville-Regular.otf);
+}
+
 html, body {
   margin: 0;
   font-family: "libreBaskerville";
   font-style: normal;
 }
 
-body:after {
-  font-size: .8em;
-  position: fixed;
-  width: 100%;
-  text-align: center;
-}
-
-
-@font-face {
-	font-family: "libreBaskerville";
-	src: url(../fonts/LibreBaskerville-Regular.otf);
-}
-
 #library {
-  line-height: 1.03em;
   position: relative;
   color: #FFFFFF;
   text-shadow: 2px 2px #004225;
-  font-size: 3em;
+  font-size: 1.5em;
-  text-align: center;
-  font-family: libreBaskerville;
   mix-blend-mode: difference;
-  margin: 1em 0;
+  left: 1em;
-}
-
-#booksearch{
-  background: #f1f1f1;
-  text-decoration: none;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  border: 3px solid black;
-  padding: 0.8em;
-  margin-left: 0.3em;
-  font-family: inherit;
-  font-size: 100%;
-  box-shadow: 0.3em 0.35em rgba(0,0,0,0.3);
 }
 
 @supports (-webkit-text-stroke: 1px darkgreen) {
@@ -49,13 +24,10 @@ body:after {
   }
 }
 
-.container {
-  margin 0 auto;
-}
-
 #bookshelf {
   max-width: 90%;
   margin-top: 3em;
+  margin-left: 1em;
   display: block;
   columns: 30rem;
   gap: 1rem;
@@ -77,51 +49,10 @@ body:after {
 
 #publication {
   margin-top: 3em;
+  margin-left: 1em;
 }
 
-#latestevent {
-  text-align: center;
-  color: #DD4F77;
-}
-
-#upcomingevent {
-  text-align: center;
-  color: #404d81;
-}
-
-.event {
-  margin: 0 1em 1em;
-  max-width: calc(90% - 3em);
-  min-width: calc(90% - 3em);
-  margin-top: 3em;
-  padding: 6px;
-  display: inline-block;
-  float: left;
-  border: 3px solid black;
-  background-color: #f1f1f1;
-  border-spacing: 0;
-  border-collapse: collapse;
-  z-index: 10;
-}
-
-button {
-  z-index: 10;
-  border: 3px solid black;
-  padding: 0.8em;
-  margin-left: 0.3em;
-  color: black;
-  min-width: auto;
-  background-color: #f1f1f1;
-  font-family: inherit;
-  font-size: 100%;
-  box-shadow: 0.3em 0.35em rgba(0,0,0,0.3);
-  cursor: pointer;
-}
-
-
 table {
-  margin: 0 1em 1em;
-  z-index: 10;
   border: 1px solid black;
   background-color: #f1f1f1;
   border-spacing: 0;
@@ -158,18 +89,9 @@ a:visited { text-decoration: none; }
 a:hover { text-decoration: none; }
 a:active { text-decoration: none; }
 
-div#auth_buttons{
+
-  position: absolute;
-  top: 0.7em;
-  right: 0.7em;
-  display:flex;
-  gap: 1em;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-}
 div#login {
-  width: 30%;
+  width: 25%;
   margin-left: auto;
   margin-right: auto;
   text-decoration: none;
@@ -180,13 +102,44 @@ input[type=text], input[type=password], input[type=file] {
   border: 1px solid #E0B0FF;
 }
 
+input {
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  text-align: right;
+  color: white;
+  padding: 0.8em 2em;
+  border: none;
+  cursor: pointer;
+}
+
+div#auth_buttons{
+  position: absolute;
+  top: 0.7em;
+  right: 0.7em;
+  display:flex;
+  gap: 1em;
+  flex-direction: row;
+
+}
+div#auth_buttons a{
+  font-size: 0.8em;
+  padding: 0.2em;
+}
+.auth {
+  color: white;
+  cursor: pointer;
+  border: 1px solid #404d81;
+  background-color: #fefefe;
+}
+.auth:hover{
+  background-color: #efefef;
+}
+
 @media only screen and (min-device-width: 320px) and (max-device-width: 480px)  {
   #library {
     text-align: left;
     max-width: 70%;
   }
-  .event {
-    max-width: 90%;
-    margin: 3em 1em 1em 1em;
-  }
 }

library/static/css/upload.css

@@ -44,9 +44,7 @@ input[type=submit] {
   background-color: #DD4F77;
   text-align: right;
   color: white;
-  padding: 1em 3em;
   border: none;
-  cursor: pointer;
 }
 
 input[type=submit]:hover {

library/templates/base.html

@@ -15,36 +15,7 @@
 	<link rel="manifest" href="{{ url_for('static', filename='icons/site.webmanifest')}}">
 </head>
 <body>
-	<div id="auth_buttons">
+	<a href="/" id="library"><h1 >{{title}}</h1></a>
-		{% if not current_user.is_authenticated %}
-		<div class="signin">
-			<a href="/login">
-				<svg class="feather">
-					<use href="{{ url_for('static', filename='icons/users-feather-sprite.svg')+ '#log-in'}}" />
-				</svg>
-				Sign in
-			</a>
-		</div>
-		<div class="signin">
-			<a href="/register">
-				<svg class="feather">
-					<use href="{{ url_for('static', filename='icons/users-feather-sprite.svg') + '#user-plus'}}" />
-				</svg>
-				Register
-			</a>
-		</div>
-		{% else %}
-		<div class="logout">
-			<a href="/logout">
-				<svg class="feather">
-					<use href="{{ url_for('static', filename='icons/users-feather-sprite.svg') + '#log-out'}}" />
-				</svg>
-				Sign out
-			</a>
-		</div>
-		{% endif %}
-	</div>
-	<a href="/"><h1 id="library">{{title}}</h1></a>
 	{% block main %}
 	{% endblock main %}
 </body>

library/templates/bookshelf.html

@@ -0,0 +1,29 @@
+{% block bookshelf %}
+<div id="bookshelf">
+{% for id, pubinfo in publications.items() %}
+	<div id="{{ id }}" class='book filter {{ pubinfo["Type"] }} {{ pubinfo["Year"] }} {{ pubinfo["License"] }}'>
+		<table>
+			<tbody>
+				{%if pubinfo["Image"]%}
+				<tr>
+					<td colspan="2" class="tdimage">
+						<img src="{{ url_for('static', filename='images/image-{0}.jpg'.format(id))}}" alt="">
+					</td>
+				</tr>
+				{% endif %}
+		    <tr>
+					<td class="author">Author/Editor:</td>
+					<td>{{ pubinfo["Author"] }}</td>
+		    </tr>
+				<tr>
+					<td class="title">Title:</td>
+					<td><a href='{{ id }}'>{{ pubinfo["Title"] }}</a></td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+{% endfor%}
+</div>
+<script src="{{ url_for('static', filename='js/dropdown.js')}}"></script>
+<script src="{{ url_for('static', filename='js/search.js')}}"></script>
+{% endblock bookshelf %}

library/templates/index.html

@@ -1,35 +1,7 @@
 
 {% extends "base.html" %}
 {% block main %}
-<nav id="nav" class="container">
 {% include 'menu.html' %}
-</nav>
+{% include 'user_authorization.html' %}
-<div id="bookshelf">
+{% include 'bookshelf.html' %}
-{% for id, pubinfo in publications.items() %}
-	<div id="{{ id }}" class='book filter {{ pubinfo["Type"] }} {{ pubinfo["Year"] }} {{ pubinfo["License"] }}'>
-		<table>
-			<tbody>
-				{%if pubinfo["Image"]%}
-				<tr>
-					<td colspan="2" class="tdimage">
-						<img src="{{ url_for('static', filename='images/image-{0}.jpg'.format(id))}}" alt="">
-					</td>
-				</tr>
-				{% endif %}
-		    <tr>
-					<td class="author">Author/Editor:</td>
-					<td>{{ pubinfo["Author"] }}</td>
-		    </tr>
-				<tr>
-					<td class="title">Title:</td>
-					<td><a href='{{ id }}'>{{ pubinfo["Title"] }}</a></td>
-				</tr>
-			</tbody>
-		</table>
-	</div>
-{% endfor%}
-</div>
-<script src="{{ url_for('static', filename='js/dropdown.js')}}"></script>
-<script src="{{ url_for('static', filename='js/search.js')}}"></script>
-
 {% endblock %}

library/templates/menu.html

@@ -1,7 +1,12 @@
 {% block menu %}
-<button id="leftmostbtn" onclick="filterSelection('all')">Reset search</button>
+<nav id="nav" class="menu">
-<button><a href="/upload">Upload</a></button>
+  <div class="dropdown">
-<div class="dropdown">
+    <button onclick="filterSelection('all')" class="dropbtn">Reset search</button>
+  </div>
+  <div class="dropdown">
+      <button class="dropbtn"><a href="/upload">Upload</a></button>
+  </div>
+  <div class="dropdown">
     <button id="PubType" class="dropbtn">Type</button>
      <div class="dropdown-content">
        {% for pubtype in pubtypes %}
@@ -26,6 +31,7 @@
     </div>
   </div>
   <div class="dropdown">
-     <input id="booksearch" type="text" placeholder="🔍 Search..">
+    <input class="dropbtn" id="booksearch" type="text" placeholder="🔍 Search..">
   </div>
+</nav>
 {% endblock menu %}

library/templates/publication.html

@@ -1,8 +1,13 @@
 {% extends "base.html" %}
 {% block main %}
-<div id="nav" class="container">
+{% include 'user_authorization.html' %}
-  <button id="leftmostbtn"><a href="/">All books</a></button>
+<div id="nav" class="menu">
+  <div class="dropdown">
+    <button><a href="/">All books</a></button>
+  </div>
+  <div class="dropdown">
     <button><a href="/upload">Upload</a></button>
+  </div>
   <div class="dropdown" style="visibility: hidden">
     <button id="Year" class="dropbtn">Year</button>
   </div>

library/templates/user_authorization.html

@@ -0,0 +1,31 @@
+{% block auth %}
+<div id="auth_buttons">
+  {% if not current_user.is_authenticated %}
+  <div class="auth">
+    <a href="/login">
+      <svg class="feather">
+        <use href="{{ url_for('static', filename='icons/users-feather-sprite.svg')+ '#log-in'}}" />
+      </svg>
+      <span>Sign in</span>
+    </a>
+  </div>
+  <div class="auth">
+    <a href="/register">
+      <svg class="feather">
+        <use href="{{ url_for('static', filename='icons/users-feather-sprite.svg') + '#user-plus'}}" />
+      </svg>
+      <span>Register</span>
+    </a>
+  </div>
+  {% else %}
+  <div class="logout">
+    <a href="/logout">
+      <svg class="feather">
+        <use href="{{ url_for('static', filename='icons/users-feather-sprite.svg') + '#log-out'}}" />
+      </svg>
+      <span>Sign out</span>
+    </a>
+  </div>
+  {% endif %}
+</div>
+{% endblock auth %}