Merge pull request #95 from NfNitLoop/dec-03

Dec 03

Author: NfNitLoop

web-client/client.css

@@ -104,6 +104,14 @@ input[type="text"]:hover
     gap: 0.3rem;
 }
 
+.item .body > h1 {
+    font-size: 1.5em;
+}
+
+.item .body > h2 {
+    font-size: 1.3em;
+}
+
 
 .item .header .text > * {
     display: inline-block;

web-client/components/Button.svelte

@@ -1,4 +1,4 @@
-<div class="buttonPosition">
+<div class="buttonPosition {$$props.class}">
     <div class="button" class:disabled class:confirmationMode on:mouseup={clicked} on:mouseleave={onMouseLeave}>
         <slot/>
     </div>
@@ -20,6 +20,7 @@ export let disabled = false
 export let href = ""
 
 // This button requires confirmation, and is currently asking for confirmation
+// TODO: Get rid of confirmation. I think I've stopped using it everywhere. also get rid of buttonPositon container.
 let confirmationMode = false
 
 let dispatcher = createEventDispatcher()
@@ -73,6 +74,7 @@ function onMouseLeave() {
 .button:active, .button.disabled{
     box-shadow: none;
     background-color: #eee;
+    cursor: default;
 }
 .button.disabled {
     color: #888;

web-client/components/ColorPicker.svelte

@@ -1,4 +1,4 @@
-<div class:isIphone>
+<div class="colorPicker" class:isIphone>
     <input bind:this={inputter} class="color" type="color" bind:value={color}>
     <color-box bind:this={box} on:click={clicked}></color-box>    
 </div>

web-client/components/IndexPage.svelte

@@ -23,6 +23,7 @@ import PostPage from "./pages/PostPage.svelte";
 import EditProfilePage from "./pages/EditProfilePage.svelte";
 import SyncPage from "./pages/SyncPage.svelte";
 import CreateIDPage from "./pages/login/CreateIDPage.svelte";
+import SecurityPage from "./pages/login/SecurityPage.svelte";
 
 // This is a writable() store so that we can notify the app
 // that appState has been modified. Svelte doesn't/can't propagate updates
@@ -48,6 +49,7 @@ routes.set({
 
     "/login": Login,
     "/login/create-id": CreateIDPage,
+    "/login/security": SecurityPage,
 
     // These are deprecated old paths.
     // TODO: Figure out a succinct way to do redirects?

web-client/components/PageHeading.svelte

@@ -160,24 +160,28 @@ let navTree = new NavNode({
             pattern: "/u/:uid/feed",
             linkAway: true,
         },
-        { 
-            requireLoggedIn: false,
+        {
+            requireLoggedIn: true,
+            title: "Log Out",
             pattern: "/login",
+            linkAway: true,
+        },
+        {
+            requireLoggedIn: false,
             title: "Log In",
-            children: [
-                {title: "Home", pattern: "/home", linkAway: true},
-                {title: "Log In", pattern: "/login" },
-                {title: "Create ID", pattern: "/login/create-id" },
-            ]
+            pattern: "/login",
+            linkAway: true,
         },
+        
         { 
-            requireLoggedIn: true,
             pattern: "/login",
-            title: "Log Out",
+            title: "Log In/Out",
+            placeholder: true,
             children: [
                 {title: "Home", pattern: "/home", linkAway: true},
-                {title: "Log Out", pattern: "/login" },
+                {title: "Identities", pattern: "/login" },
                 {title: "Create ID", pattern: "/login/create-id" },
+                {title: "Security", pattern: "/login/security", requireLoggedIn: true},
             ]
         },
         {

web-client/components/ProfileImage.svelte

@@ -3,6 +3,7 @@
     alt="identicon"
     class:defaultSize
     class:followFont
+    class="profileImage"
     height={sizeNum}
     width={sizeNum}
 />
@@ -29,6 +30,9 @@ img {
     margin: 0.2rem;
     border-radius: 5px;
     box-shadow: 0px 3px 3px rgba(0,0,0,0.15);
+
+    /** top-level CSS has .item img { max-width: 100%; }, but that causes this image to be shrinkable. Do not want: */
+    max-width: none;
 }
 
 /* Size used in ItemView blocks:*/