More CSS overhaul

app.py

@@ -131,7 +131,9 @@ def read_article(article_id):
     conn = sqlite3.connect('pocket/readitlater.db')
     c = conn.cursor()
 
-    c.execute("SELECT * FROM articles where id=?", (article_id,))
+    # c.execute("SELECT * FROM articles where id=?", (article_id,))
+    c.execute("SELECT articles.id, url, content, title, byline, read FROM articles INNER JOIN saved_articles on saved_articles.article_id = articles.id WHERE articles.id=?", (article_id, ))
+    
     rows = c.fetchall()
     conn.commit()
     conn.close()
@@ -217,6 +219,20 @@ def archive_article(article_id):
     return redirect(url_for('index'))
 
 
+@ldap.login_required
+@app.route('/unarchive/<int:article_id>')
+def unarchive_article(article_id):
+    conn = sqlite3.connect('pocket/readitlater.db')
+    c = conn.cursor()
+
+    c.execute("UPDATE saved_articles SET read=0 WHERE user=? AND article_id=?", (session['user_id'], article_id))
+
+    conn.commit()
+    conn.close()
+
+    return redirect(url_for('archived'))
+
+
 @app.route('/logout')
 def logout():
     session.pop('user_id', None)

static/style.css

@@ -5,12 +5,21 @@ html {
   position: fixed;
 }
 
+.tooltip .arrow {
+  display: none;
+}
+
+
 .navbar {
   position: absolute;
   top: 0;
   width: 100%;
 }
 
+#sidebar a:hover {
+  text-decoration: none;
+}
+
 .wrapper {
   height: calc(100% - 56px);
   overflow: auto;
@@ -20,6 +29,18 @@ html {
   align-items: stretch;
 }
 
+.cell {
+  color: black;
+}
+
+.cell-button {
+  color: gray;
+}
+
+.cell-button:hover {
+  color: darkgray;
+}
+
 .toolbar-button {
   padding-left: 2rem;
   padding-top: .375rem;
@@ -27,6 +48,11 @@ html {
   color: white;
 }
 
+.toolbar-button:hover {
+  color: #ddd;
+  text-decoration: none;
+}
+
 .back-chevron {
   line-height: 1.5 !important;
   vertical-align: middle !important;
@@ -83,6 +109,10 @@ html {
     padding: 5px;
   }
 
+  .cell {
+    color: white;
+  }
+
   #sidebar {
     padding-left: 20px;
     background-color: #1a1d20;

templates/article.j2

@@ -17,7 +17,11 @@
 
 {% block navbar %}
 <nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark">
-    <a href="/"><div class="navbar-brand"><svg
+    {% if article[5] == 1 %}
+    <a href="{{url_for('archived')}}"><div class="navbar-brand"><svg
+    {% else %}
+    <a href="{{url_for('index')}}"><div class="navbar-brand"><svg
+    {% endif %}
                     width="24"
                     height="24"
                     fill="none"
@@ -34,7 +38,7 @@
             <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
         </div>
         <div class="navbar-text" style="margin-right: 20px; ">{{ user['userName'] }}</div> #}
-        <a class="toolbar-button" href="#"><svg
+        <div class="toolbar-button"><svg
                     width="24"
                     height="24"
                     fill="none"
@@ -44,8 +48,22 @@
                     stroke-linejoin="round"
                     style="line-height: 1.5; vertical-align: middle; margin-bottom: 4px;">
                     <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#type"/>
-                </svg></a>
-        <a class="toolbar-button" href="/archive/{{ article[0] }}"><svg
+                </svg><svg
+                    width="16"
+                    height="16"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    style="line-height: 1.5; vertical-align: middle; margin-bottom: 4px;">
+                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#chevron-down"/>
+                </svg></div>
+        {% if article[5] == 1 %}
+        <a class="toolbar-button" href="/unarchive/{{ article[0] }}" data-toggle="tooltip" data-placement="bottom" title="Unarchive"><svg
+        {% else %}
+        <a class="toolbar-button" href="/archive/{{ article[0] }}" data-toggle="tooltip" data-placement="bottom" title="Archive"><svg
+        {% endif %}
                     width="24"
                     height="24"
                     fill="none"
@@ -54,9 +72,13 @@
                     stroke-linecap="round"
                     stroke-linejoin="round"
                     style="line-height: 1.5; vertical-align: middle; margin-bottom: 4px;">
+                    {% if article[5] == 1 %}
+                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#plus-square"/>
+                    {% else %}
                     <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#archive"/>
+                    {% endif %}
                 </svg></a>
-        <a class="toolbar-button" href="/delete/{{ article[0] }}" style="padding-right: 1rem;"><svg
+        <a class="toolbar-button" href="/delete/{{ article[0] }}" style="padding-right: 1rem;" data-toggle="tooltip" data-placement="bottom" title="Trash"><svg
                     width="24"
                     height="24"
                     fill="none"
@@ -103,5 +125,9 @@
 <script>
 $('#article img').css('max-width', '100%');
 $('#article img').css('height', 'auto');
+
+$(function () {
+  $('[data-toggle="tooltip"]').tooltip()
+})
 </script>
 {% endblock %}

templates/bookmarklet.j2

@@ -40,4 +40,9 @@
 
 {% block scripts %}
 {{ super() }}
+<script>
+$(function () {
+  $('[data-toggle="tooltip"]').tooltip()
+})
+</script>
 {% endblock %}

templates/fragments/cell.j2

@@ -0,0 +1,40 @@
+<div style="color: black; padding: 10px; margin-bottom: 10px" class="card" id="article">
+    <a href="/article/{{article[0]}}" class="cell">{{ article[2] }}</a>
+    <a href="{{ article[1] }}" target="_blank" style="color: darkgray">{{ article[3] }}</a>
+    <span style="padding-top: 10px;">
+    {% if request.path == url_for('archived') %}
+    <a href="/unarchive/{{article[0]}}" style="color: gray" data-toggle="tooltip" data-placement="bottom" title="Unarchive"><svg
+                    width="24"
+                    height="24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    style="line-height: 1; vertical-align: middle; margin-bottom: 4px;">
+                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#plus-square"/></svg></a>
+    {% else %}
+    <a href="/archive/{{article[0]}}" class="cell-button" data-toggle="tooltip" data-placement="bottom" title="Archive"><svg
+                    width="24"
+                    height="24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    style="line-height: 1; vertical-align: middle; margin-bottom: 4px;">
+                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#archive"/></svg></a>
+    {% endif %}
+    &nbsp;&nbsp;&nbsp;&nbsp;
+    <a href="/delete/{{article[0]}}" class="cell-button" data-toggle="tooltip" data-placement="bottom" title="Trash"><svg
+                    width="24"
+                    height="24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    style="line-height: 1; vertical-align: middle; margin-bottom: 4px;">
+                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#trash"/></svg></a>
+    </span>
+</div>

templates/fragments/navbar.j2

@@ -30,10 +30,40 @@
         </ul>
         <form class="form-inline ml-auto">
             {% if request.path != url_for('bookmarklet') %}
-            <a class="btn btn-success" id="refreshButton" href="#refresh" onclick="refreshPage();" role="button" style="margin-right: 20px; display: none;">Refresh</a>
-            <a class="btn btn-info" href="#addLink" onclick="openLinkModal();" role="button" style="margin-right: 20px;">Add Link</a>
+            {# <a class="btn btn-success" id="refreshButton" href="#refresh" onclick="refreshPage();" role="button" style="margin-right: 20px; display: none;">Refresh</a> #}
+            <a class="toolbar-button" id="refreshButton" href="#refresh" onclick="refreshPage();" style="display: none;" data-toggle="tooltip" data-placement="bottom" title="Refresh"><svg
+                    width="24"
+                    height="24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    style="line-height: 1.5; vertical-align: middle; margin-bottom: 4px;">
+                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#refresh-cw"/></svg></a>
+            {# <a class="btn btn-info" href="#addLink" onclick="openLinkModal();" role="button" style="margin-right: 20px;">Add Link</a> #}
+            <a class="toolbar-button" href="#addLink" onclick="openLinkModal();" data-toggle="tooltip" data-placement="bottom" title="Add Link"><svg
+                    width="24"
+                    height="24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    style="line-height: 1.5; vertical-align: middle; margin-bottom: 4px;">
+                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#plus"/></svg></a>
             {% endif %}
-            <a class="btn btn-primary" href="/logout" role="button">Logout</a>
+            {# <a class="btn btn-primary" href="/logout" role="button">Logout</a> #}
+            <a class="toolbar-button" href="/logout" style="padding-right: 1rem;" data-toggle="tooltip" data-placement="bottom" title="Logout"><svg
+                    width="24"
+                    height="24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    style="line-height: 1.5; vertical-align: middle; margin-bottom: 4px;">
+                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#log-out"/></svg></a>
         </form>
     </div>        
 </div>

templates/list.j2

@@ -32,16 +32,7 @@
             <div class="row justify-content-center">
                 <div class="col-lg-12">
                     {% for article in articles|reverse %}
-                        <div style="color: black; padding: 10px; margin-bottom: 10px" class="card" id="article">
-                            <a href="/article/{{article[0]}}">{{ article[2] }}</a>
-                            <a href="{{ article[1] }}" target="_blank" style="color: darkgray">{{ article[3] }}</a>
-                            <br>
-                            <span>
-                            <a href="/archive/{{article[0]}}" class='text-success'>Archive</a>
-                            &nbsp;&nbsp;&nbsp;&nbsp;
-                            <a href="/delete/{{article[0]}}" class='text-danger'>Delete</a>
-                            </span>
-                        </div>
+                        {% include "fragments/cell.j2" %}
                     {% endfor %}
                 </div>
             </div>
@@ -56,4 +47,9 @@
 {{ super() }}
 {# <script src="{{url_for('.static', filename='inobounce.js')}}"></script> #}
 <script type="text/javascript" src="{{url_for('.static', filename='add_modal.js')}}"></script>
+<script>
+$(function () {
+  $('[data-toggle="tooltip"]').tooltip()
+})
+</script>
 {% endblock %}