Mobile

planetary-social · Oct 24, 2023 · 4902f05 · 4902f05
1 parent 5fa5312
commit 4902f05
Show file tree

Hide file tree

Showing 15 changed files with 87 additions and 9 deletions.
diff --git a/frontend/nos-crossposting-service-frontend/src/App.vue b/frontend/nos-crossposting-service-frontend/src/App.vue
@@ -72,6 +72,16 @@ body {
     }
   }
 }
+
+@media screen and (max-width: 1200px) {
+  #app {
+    .wrapper {
+      .content {
+        padding: 0;
+      }
+    }
+  }
+}
 </style>
 
 <script lang="ts">

diff --git a/frontend/nos-crossposting-service-frontend/src/components/Button.vue b/frontend/nos-crossposting-service-frontend/src/components/Button.vue
@@ -1,5 +1,5 @@
 <template>
-  <button @click="onClick" :class="{ disabled: disabled }">{{ text }}</button>
+  <button @click="onClick" :class="{ button: true, disabled: disabled }">{{ text }}</button>
 </template>
 
 <script lang="ts">

diff --git a/frontend/nos-crossposting-service-frontend/src/components/CurrentUser.vue b/frontend/nos-crossposting-service-frontend/src/components/CurrentUser.vue
@@ -44,7 +44,7 @@ export default class CurrentUser extends Vue {
 <style scoped lang="scss">
 .current-user {
   display: grid;
-  grid-template-columns: 500px 50px;
+  grid-template-columns: auto 50px;
   grid-template-rows: auto;
   grid-template-areas:
     "user-info checkmark";

diff --git a/frontend/nos-crossposting-service-frontend/src/components/Explanation.vue b/frontend/nos-crossposting-service-frontend/src/components/Explanation.vue
@@ -37,4 +37,10 @@ export default class Explanation extends Vue {
     line-height: 36px;
   }
 }
+
+@media screen and (max-width: 1200px) {
+  .explanation {
+    max-width: none;
+  }
+}
 </style>
diff --git a/frontend/nos-crossposting-service-frontend/src/components/Header.vue b/frontend/nos-crossposting-service-frontend/src/components/Header.vue
@@ -84,4 +84,28 @@ header {
     margin-left: 1em;
   }
 }
+
+@media screen and (max-width: 1200px) {
+  header {
+    flex-flow: column nowrap;
+    text-align: center;
+
+    nav {
+      margin: 1em 0;
+      text-align: center;
+
+      ul {
+        li {
+          display: block;
+          padding: .5em 0;
+        }
+      }
+    }
+
+    .logout-button {
+      margin: 1em 0;
+    }
+  }
+}
+
 </style>
diff --git a/frontend/nos-crossposting-service-frontend/src/components/Input.vue b/frontend/nos-crossposting-service-frontend/src/components/Input.vue
@@ -1,5 +1,5 @@
 <template>
-  <input type="text" :placeholder="placeholder" :value="modelValue"
+  <input type="text" :placeholder="placeholder" :value="modelValue" class="input"
          @input="onInput" :class="{ disabled: disabled }" :disabled="disabled">
 </template>
 
@@ -33,7 +33,6 @@ input {
   border: 3px solid #fff;
   padding: 30px;
   background-color: #1B122D;
-  min-width: 500px;
   font-weight: 700;
   font-size: 32px;
   line-height: 32px;

diff --git a/frontend/nos-crossposting-service-frontend/src/components/LogInWithTwitterButton.vue b/frontend/nos-crossposting-service-frontend/src/components/LogInWithTwitterButton.vue
@@ -28,6 +28,7 @@ a {
 
     img {
       display: block;
+      margin: 0 auto;
       height: 52px;
     }
   }

diff --git a/frontend/nos-crossposting-service-frontend/src/views/HomeView.vue b/frontend/nos-crossposting-service-frontend/src/views/HomeView.vue
@@ -143,6 +143,10 @@ button {
   margin-left: 1em;
 }
 
+.current-user {
+  width: 550px;
+}
+
 .public-keys {
   list-style-type: none;
   font-size: 28px;
@@ -175,4 +179,38 @@ button {
     }
   }
 }
+
+.link-npub-form {
+  display: flex;
+
+  .input {
+    width: 500px;
+  }
+
+  .button {
+
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .current-user {
+    width: 100%;
+  }
+
+  .log-in-with-twitter-button {
+    display: block;
+  }
+
+  .link-npub-form {
+    display: flex;
+
+    .input {
+      flex: 1;
+    }
+
+    .button {
+
+    }
+  }
+}
 </style>
diff --git a/service/ports/http/frontend/css/app.61669bce.css b/service/ports/http/frontend/css/app.61669bce.css
diff --git a/service/ports/http/frontend/css/app.87cc5009.css b/service/ports/http/frontend/css/app.87cc5009.css
diff --git a/service/ports/http/frontend/index.html b/service/ports/http/frontend/index.html
@@ -1 +1 @@
-<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>X Connect</title><script defer="defer" src="/js/chunk-vendors.53f93b5d.js"></script><script defer="defer" src="/js/app.6154432e.js"></script><link href="/css/app.61669bce.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but nos-crossposting-service-frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
+<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>X Connect</title><script defer="defer" src="/js/chunk-vendors.53f93b5d.js"></script><script defer="defer" src="/js/app.11f9e838.js"></script><link href="/css/app.87cc5009.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but nos-crossposting-service-frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
diff --git a/service/ports/http/frontend/js/app.11f9e838.js b/service/ports/http/frontend/js/app.11f9e838.js
diff --git a/service/ports/http/frontend/js/app.11f9e838.js.map b/service/ports/http/frontend/js/app.11f9e838.js.map
diff --git a/service/ports/http/frontend/js/app.6154432e.js b/service/ports/http/frontend/js/app.6154432e.js
diff --git a/service/ports/http/frontend/js/app.6154432e.js.map b/service/ports/http/frontend/js/app.6154432e.js.map
-Original file line number
+Diff line change
@@ Expand Up / @@ -28,6 +28,7 @@ a { @@
         img {
           display: block;
+          margin: 0 auto;
           height: 52px;
         }
       }
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>X Connect</title><script defer="defer" src="/js/chunk-vendors.53f93b5d.js"></script><script defer="defer" src="/js/app.6154432e.js"></script><link href="/css/app.61669bce.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but nos-crossposting-service-frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
		<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>X Connect</title><script defer="defer" src="/js/chunk-vendors.53f93b5d.js"></script><script defer="defer" src="/js/app.11f9e838.js"></script><link href="/css/app.87cc5009.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but nos-crossposting-service-frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>