Fix profile view, menus

FossilOrigin-Name: e219385af346bfbdb070a7e17bf6fe5020d1dfddfae5077d83cb34db45ceb826

Makefile

@@ -76,6 +76,11 @@ $(PAGES_DIR)/follow_svg.chtml: $(PAGES_DIR)/follow_svg.html
 	./filec $< data_follow_svg_html > $@
 $(PAGES_DIR)/notification_action.chtml: $(PAGES_DIR)/notification_action.html
 	./filec $< data_notification_action_html > $@
+$(PAGES_DIR)/config_general.chtml: $(PAGES_DIR)/config_general.html
+	./filec $< data_config_general_html > $@
+$(PAGES_DIR)/config_appearance.chtml: $(PAGES_DIR)/config_appearance.html
+	./filec $< data_config_appearance_html > $@
+
 
 $(MASTODONT_DIR): 
 	git clone $(MASTODONT_URL) || true

dist/treebird20.css

@@ -461,7 +461,6 @@ ul li:first-child a.sidebarbtn
 
 .status .poster-stats
 {
-    display: flex;
     /* To maintain compatibility while keeping it a flexbox, we have to 
      * hardcode the width, sorry! Tables are just weird and I hate CSS */
     max-width: 520px;
@@ -494,8 +493,9 @@ ul li:first-child a.sidebarbtn
 {
     color: #808080;
     display: inline;
+    float: right;
     font-size: 12px;
-    margin: 3px 0 0 3px;
+    margin: 3px 3px 0 3px;
 }
 
 .status-interact
@@ -578,6 +578,10 @@ ul li:first-child a.sidebarbtn
  **********************/
 .header-btn
 {
+    display: inline-block;
+    padding: 8px 15px;
+    margin: 0;
+    background: inherit;
     text-decoration: none;
     color: #606060;
     font-size: 14px;
@@ -602,27 +606,38 @@ ul li:first-child a.sidebarbtn
 .acct-banner
 {
     width: 100%;
-    display: flex;
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
     height: 256px;
 }
 
-.acct-pfp
+.account
 {
     position: relative;
+}
+
+.account-info
+{
+    background: linear-gradient(#e4e4e4, #efefef);
+    color: #000;
+    padding: 2px 50px;
+    border-bottom: 1px solid #cacaca;
+}
+
+.acct-pfp
+{
+    position: absolute;
+    display: inline;
     z-index: 100;
     border: 3px solid #cacaca;
     background-color: #fff;
     border-radius: 8px;
     width: 100px;
     height: 100px;
-    top: -8px;
-    left: 150px;
+    top: 190px;
+    left: 42px;
     object-fit: cover;
-    margin-top: -108px;
-    margin-left: -108px;
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
@@ -630,7 +645,6 @@ ul li:first-child a.sidebarbtn
 
 .acct-header
 {
-    display: flex;
     z-index: 1;
     padding-left: 160px;
     background: linear-gradient(#fff, #f1f1f1);
@@ -640,6 +654,7 @@ ul li:first-child a.sidebarbtn
 
 .acct-info-data
 {
+    display: inline-block;
     position: relative;
     left: 160px;
     top: 200px;
@@ -663,11 +678,24 @@ ul li:first-child a.sidebarbtn
     text-shadow: 0px 0px 5px #000;
 }
 
-.header-btn
+.follow-btn
 {
-    display: inline-block;
-    padding: 8px 15px;
-    margin: 0;
+    margin-left: auto;
+    position: relative;
+    float: right;
+    top: 10px;
+    margin: 0px 15px 15px 0px;
+    padding: 5px 20px;
+    border-radius: 24px;
+    background: inherit;
+    box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+.follow-btnm.active
+{
+    box-shadow: unset;
+    color: #fff;
+    background: linear-gradient(#aa0000, #600000);
 }
 
 /****************
@@ -904,3 +932,44 @@ ul.large-list li a
     border-right: 1px solid #dadada;
 }
 
+
+/* MENUS */
+
+.menu-container:hover .menu
+{
+    position: absolute;
+    display: block;
+}
+
+.menu
+{
+    z-index: 5;
+    display: none;
+    background: #fafafa;
+    border-radius: 4px;
+    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
+}
+
+.menu ul
+{
+    margin: 0;
+    padding: 4px 0 4px 0;
+}
+
+.menu ul li
+{
+    list-style-type: none;
+}
+
+.menu .btn
+{
+    background: unset;
+    display: block;
+    padding: 6px 12px;
+}
+
+.menu .btn:hover
+{
+    background-color: #eaeaea;
+    color: #000;
+}

src/main.c

@@ -67,7 +67,10 @@ int main(void)
          *  Path handling  *
          ******************/
         struct path_info paths[] = {
+            { "/config/general", content_config_general },
+            { "/config/appearance", content_config_appearance },
             { "/config", content_config },
+            /* { "/config/account", content_config_account }, */
             { "/login", content_login },
             { "/test", content_test },
             { "/@:", content_account },

src/page_config.c

@@ -31,7 +31,8 @@
 
 // Pages
 #include "../static/index.chtml"
-#include "../static/config.chtml"
+#include "../static/config_general.chtml"
+#include "../static/config_appearance.chtml"
 #include "../static/config_sidebar.chtml"
 
 enum config_category
@@ -41,6 +42,17 @@ enum config_category
     CONFIG_CAT_ACCOUNT
 };
 
+static void load_config(struct session* ssn)
+{
+    if (ssn->post.theme)
+    {
+        ssn->config.theme = ssn->post.theme;
+        printf("Set-Cookie: %s=%s; HttpOnly; SameSite=Strict;",
+               "theme", ssn->post.theme);
+        ssn->config.changed = 1;
+    }
+}
+
 static char* construct_config_sidebar(enum config_category cat, size_t* size)
 {
     char* sidebar_html;
@@ -58,21 +70,17 @@ static char* construct_config_sidebar(enum config_category cat, size_t* size)
     return sidebar_html;
 }
 
-void content_config(struct session* ssn, mastodont_t* api, char** data)
+
+void content_config_general(struct session* ssn, mastodont_t* api, char** data)
 {
     char* sidebar_html = construct_config_sidebar(CONFIG_CAT_GENERAL, NULL);
-    if (ssn->post.theme)
-    {
-        ssn->config.theme = ssn->post.theme;
-        printf("Set-Cookie: %s=%s; HttpOnly; SameSite=Strict;",
-               "theme", ssn->post.theme);
-        ssn->config.changed = 1;
-    }
 
+    load_config(ssn);
+    
     struct base_page b = {
         .category = BASE_CAT_CONFIG,
         .locale = L10N_EN_US,
-        .content = data_config_html,
+        .content = data_config_general_html,
         .sidebar_left = sidebar_html
     };
 
@@ -80,3 +88,27 @@ void content_config(struct session* ssn, mastodont_t* api, char** data)
     // Cleanup
     free(sidebar_html);
 }
+
+
+void content_config_appearance(struct session* ssn, mastodont_t* api, char** data)
+{
+    char* sidebar_html = construct_config_sidebar(CONFIG_CAT_APPEARANCE, NULL);
+
+    load_config(ssn);
+
+    struct base_page b = {
+        .category = BASE_CAT_CONFIG,
+        .locale = L10N_EN_US,
+        .content = data_config_appearance_html,
+        .sidebar_left = sidebar_html
+    };
+
+    render_base_page(&b, ssn, api);
+    // Cleanup
+    free(sidebar_html);
+}
+
+void content_config(struct session* ssn, mastodont_t* api, char** data)
+{
+    
+}

src/page_config.h

@@ -22,6 +22,9 @@
 #include <mastodont.h>
 #include "session.h"
 
+void content_config_appearance(struct session* ssn, mastodont_t* api, char** data);
+void content_config_general(struct session* ssn, mastodont_t* api, char** data);
+void content_config_account(struct session* ssn, mastodont_t* api, char** data);
 void content_config(struct session* ssn, mastodont_t* api, char** data);
 
 #endif // PAGE_CONFIG_H

static/account.html

@@ -7,25 +7,30 @@
   </div>
   
   <div class="acct-header">
-    <a href="#" class="header-btn">
+    <a href="#" class="header-btn btn">
       <span class="btn-header">%s</span>
       <span class="btn-content">%d</span>
     </a>
     
-    <a href="#" class="btn header-btn">
+    <a href="#" class="header-btn btn">
       <span class="btn-header">%s</span>
       <span class="btn-content">%d</span>
     </a>
 
-    <a href="#" class="btn header-btn">
+    <a href="#" class="header-btn btn">
       <span class="btn-header">%s</span>
       <span class="btn-content">%d</span>
     </a>
+    
+    <a href="#" class="follow-btn btn">Follow</a>
   </div>
-
   <img class="acct-pfp" src="%s">
 </div>
 
+<div class="account-info">
+  <p>Hello world</p>
+</div>
+
 <div class="account-content">
   %s
 </div>

static/config.html

@@ -1,47 +0,0 @@
-<div class="simple-page">
-  <form action="config" method="post">
-    <h1>General</h1>
-    <h3>JavaScript</h3>
-    <ul>
-      <li>
-        <input type="checkbox" id="cfgjsactions" name="jsactions">
-        <label for="cfgjsactions">Quick actions - Likes, Boosts, etc done in background</label>
-      </li>
-      <li>
-        <input type="checkbox" id="cfgjsreply" name="jsreply">
-        <label for="cfgjsreply">Quick reply - Replies don't require redirects</label>
-      </li>
-      <li>
-        <input type="checkbox" id="cfgjslive" name="jslive">
-        <label for="cfgjslive">Live statuses - Statuses fetch on the fly</label>
-      </li>
-    </ul>
-
-    <!-- Appearance -->
-    <h1>Appearance</h1>
-    <h3>Theme variant</h3>
-    <ul>
-      <li>
-        <label for="cfgthemevar">Theme variant</label>
-        <select name="theme" id="cfgthemevar">
-          <option value="treebird20">treebird 2.0 - Default, simple theme</option>
-          <option value="treebird30">treebird 3.0 - Flat, modern theme</option>
-          <option value="treebird10">treebird Minimal - For netsurf, old browsers, minimal styling</option>
-        </select>
-      </li>
-    </ul>
-    <h3>Color Scheme</h3>
-    <ul>
-      <li>
-        <input type="radio" id="cfglight" name="themeclr" value="light" checked>
-        <label for="cfglight">Light</label>
-      </li>
-      <li>
-        <input type="radio" id="cfgdark" name="themeclr" value="dark">
-        <label for="cfgdark">Dark</label>
-      </li>
-    </ul>
-    
-    <input type="submit" value="Save">
-  </form>
-</div>

static/config_appearance.html

@@ -0,0 +1,30 @@
+<div class="simple-page">
+  <form action="../config" method="post">
+    <!-- Appearance -->
+    <h1>Appearance</h1>
+    <h3>Theme variant</h3>
+    <ul>
+      <li>
+        <label for="cfgthemevar">Theme variant</label>
+        <select name="theme" id="cfgthemevar">
+          <option value="treebird20">treebird 2.0 - Default, simple theme</option>
+          <option value="treebird30">treebird 3.0 - Flat, modern theme</option>
+          <option value="treebird10">treebird Minimal - For netsurf, old browsers, minimal styling</option>
+        </select>
+      </li>
+    </ul>
+    <h3>Color Scheme</h3>
+    <ul>
+      <li>
+        <input type="radio" id="cfglight" name="themeclr" value="light" checked>
+        <label for="cfglight">Light</label>
+      </li>
+      <li>
+        <input type="radio" id="cfgdark" name="themeclr" value="dark">
+        <label for="cfgdark">Dark</label>
+      </li>
+    </ul>
+    
+    <input type="submit" value="Save">
+  </form>
+</div>

static/config_general.html

@@ -0,0 +1,22 @@
+<div class="simple-page">
+  <form action="../config" method="post">
+    <h1>General</h1>
+    <h3>JavaScript</h3>
+    <ul>
+      <li>
+        <input type="checkbox" id="cfgjsactions" name="jsactions">
+        <label for="cfgjsactions">Quick actions - Likes, Boosts, etc done in background</label>
+      </li>
+      <li>
+        <input type="checkbox" id="cfgjsreply" name="jsreply">
+        <label for="cfgjsreply">Quick reply - Replies don't require redirects</label>
+      </li>
+      <li>
+        <input type="checkbox" id="cfgjslive" name="jslive">
+        <label for="cfgjslive">Live statuses - Statuses fetch on the fly</label>
+      </li>
+    </ul>
+
+    <input type="submit" value="Save">
+  </form>
+</div>

static/status.html

@@ -11,8 +11,15 @@
             <div class="poster-stats">
               <span class="username">%s</span>
               <a class="instance-info" href="%s/@%s">%s</a>
-              <span class="alignend status-visibility">
+              <span class="alignend status-visibility menu-container">
                 %s
+                <div class="menu">
+                  <ul>
+                    <li><a class="btn" href="#">Bookmark status</a></li>
+                    <li><a class="btn" href="#">View on instance</a></li>
+                    <li><a class="btn" href="#">Mute thread</a></li>
+                  </ul>
+                </div>
               </span>
             </div>
             <span class="status-content">