mobile view wip

myriad/static/style.css

@@ -42,35 +42,6 @@ form textarea{
 
 
 
-#main{
-    background-color: rgb(255, 255, 255, 0);
-    border-radius: 5px;
-    width: 60%;
-    margin:auto;
-    padding:20px;
-    display:flex;
-    margin-top:20px;
-}
-#nav{
-    margin-right:20px;
-    flex:20%;
-    height:fit-content;
-    position:sticky;
-    position: -webkit-sticky;
-}
-.navitem{
-    display:block;
-}
-
-.container{
-    background-color:#e6f7ff;
-    border-color:#99dfff;
-    border-style:solid;
-    border-width:2px;
-    flex: 80%;
-    padding: 10px;
-    border-radius:5px;
-}
 
 .profile{
     margin:15px;
@@ -104,7 +75,7 @@ form textarea{
 }
 .manage_images_2{
     clear:both;
-    width:600px;
+    width:500px;
 }
 .manage_icons_3{
     display:block;
@@ -240,14 +211,70 @@ form textarea{
 
 
 
+#mobile-nav{
+    display:none;
+    background-color:#e6f7ff;
+    border-color:#99dfff;
+    border-style:solid;
+    border-width:2px;
+    border-radius:5px;
+}
+#main{
+    background-color: rgb(255, 255, 255, 0);
+    border-radius: 5px;
+    width: 60%;
+    margin:auto;
+    padding:20px;
+    display:flex;
+    margin-top:20px;
+}
+#nav{
+    margin-right:20px;
+    flex:20%;
+    height:fit-content;
+    position:sticky;
+    position: -webkit-sticky;
+}
+.navitem{
+    display:block;
+}
 
+.container{
+    background-color:#e6f7ff;
+    border-color:#99dfff;
+    border-style:solid;
+    border-width:2px;
+    border-radius:5px;
+    flex: 80%;
+    padding: 10px;
+}
 
-@media (max-width: 1000px) {
+.mobile{
+    display:none;
+}
+
+@media (max-width: 1000px) 
+{
   #main{
     width:90%;
   }
   #nav{
     display:none;
   }
+  .mobile{
+    display:inline;
+  }
+  #mobile-nav
+  {
+    display:inline-block;
+    top:0;
+    position:absolute;
+    padding:10px;
+    margin-left:20px;
+    margin-top:10px;
+  }
+  .container{
+    margin:20px;
+  }
   
 }

myriad/static/themes/christmas.css

@@ -37,7 +37,7 @@ body.christmas{
     background: linear-gradient(90deg, #5abf72 0%, #da1414 50%, #bf8282 100%);
     scrollbar-color:#da1414 #f49191;
 }
-.christmas .container{
+.christmas .container, .christmas #mobile-nav{
     background-color:#fac9c9;
     border-color:#da1414;
 }

myriad/static/themes/dark-blue.css

@@ -37,7 +37,7 @@ body.dark-blue{
     background: linear-gradient(90deg, #4685fb 0%, #142bda 50%, #0e1598 100%);
     scrollbar-color:#a414da #d991f4;
 }
-.dark-blue .container{
+.dark-blue .container, .dark-blue #mobile-nav{
     background-color:#c9cffa;
     border-color:#142bda;
 }

myriad/static/themes/dark-green.css

@@ -37,7 +37,7 @@ body.dark-green{
     background: linear-gradient(90deg, #6dad9e 0%, #41da86 50%, #36b78c 100%);
     scrollbar-color:#5ed3a2 #a8d0c5;
 }
-.dark-green .container{
+.dark-green .container, .dark-green #mobile-nav{
     background-color:#c9fae8;
     border-color:#59d7af;
 }

myriad/static/themes/dark.css

@@ -40,7 +40,7 @@ body.dark{
     background: linear-gradient(90deg, #1B1F23 0%, #1B1F23 50%, #1B1F23 100%);
     scrollbar-color:#292F35 #373b3e;
 }
-.dark .container{
+.dark .container, .dark #mobile-nav{
     background-color:#1B1F23;
     border-color:black;
 }

myriad/static/themes/default.css

@@ -37,4 +37,8 @@
     background: #00b7ff;
     background: linear-gradient(90deg, #00b7ff 0%, #57c785 50%, #eddd53 100%);
     scrollbar-color:#008bcc #b3e7ff;
+}
+.default .container, .default #mobile-nav{
+    background-color:#e6f7ff;
+    border-color:#99dfff;
 }

myriad/static/themes/green.css

@@ -37,7 +37,7 @@ body.green{
     background: linear-gradient(90deg, #67e2ab 0%, #14da8b 50%, #0e986a 100%);
     scrollbar-color:#14da88 #91f4d8;
 }
-.green .container{
+.green .container, .green #mobile-nav{
     background-color:#c9fae8;
     border-color:#14da9b;
 }

myriad/static/themes/pink-lighter.css

@@ -38,7 +38,7 @@ body.pink-lighter{
     background: linear-gradient(90deg, #f5c2ea 0%, #e89dfb 50%, #f6959c 100%);
     scrollbar-color:#a414da #d991f4;
 }
-.pink-lighter .container{
+.pink-lighter .container, .pink-lighter #mobile-nav{
     background-color:#fac9f6;
     border-color:#da14c6;
 }

myriad/static/themes/pink.css

@@ -37,7 +37,7 @@ body.pink{
     background: linear-gradient(90deg, #f8a1e5 0%, #d55ff3 50%, #f5c35e 100%);
     scrollbar-color:#a414da #d991f4;
 }
-.pink .container{
+.pink .container, .pink #mobile-nav{
     background-color:#fac9f6;
     border-color:#da14c6;
 }

myriad/static/themes/purple.css

@@ -38,7 +38,7 @@ body.purple{
     background: linear-gradient(90deg, #fb46c0 0%, #a414da 50%, #720e98 100%);
     scrollbar-color:#a414da #d991f4;
 }
-.purple .container{
+.purple .container, .purple #mobile-nav{
     background-color:#ecc9fa;
     border-color:#a414da;
 }

myriad/static/themes/red.css

@@ -37,7 +37,7 @@ body.red{
     background: linear-gradient(90deg, #fb4646 0%, #da1414 50%, #980e0e 100%);
     scrollbar-color:#da1414 #f49191;
 }
-.red .container{
+.red .container, .red #mobile-nav{
     background-color:#fac9c9;
     border-color:#da1414;
 }

myriad/templates/base.html

@@ -8,6 +8,9 @@
 <link rel="stylesheet" href="{{ url_for('static', filename='themes/'+theme) }}">
 {% endfor %}
 
+<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
+
+
 
 <div id="main">
   
@@ -48,6 +51,10 @@
 
     </div>
 
+    <div id="mobile-nav">
+      <a href="{{ url_for('home.index') }}">Home</a> | <a href="{{ url_for('home.full_list') }}">Full List</a> | <a href="{{ url_for('home.groups') }}">Groups</a> | <a href="{{ url_for('blog.blog') }}">Blog</a>
+    </div>
+
   
     {% block content %}{% endblock %}
 

myriad/templates/blog/blog.html

@@ -6,6 +6,8 @@
 
 {% block content %}
 <div class="container">
+
+  {% if g.user %}<a class="mobile" href="{{ url_for('blog.new') }}">New post</a>{% endif %}
   
   {% for post in blog %}
     {% set op = member_ids[post[1]] %}