Merge branch 'develop' into 'develop'

Develop

See merge request !15

src/App.scss

@@ -29,6 +29,11 @@ a {
     text-decoration: none;
 }
 
+button{
+    border: none;
+    border-radius: 5px;
+}
+
 .container {
     display: flex;
     flex-wrap: wrap;
@@ -63,7 +68,7 @@ nav {
         padding-right: 20px;
         display: flex;
         align-items: center;
-        flex-basis: 920px;
+        flex-basis: 970px;
         margin: auto;
         height: 50px;
         background-repeat: no-repeat;
@@ -99,8 +104,7 @@ main-router {
 .panel-heading {
     border-radius: 0.5em 0.5em 0 0;
     background-size: cover;
-    padding-top: 0.3em;
-    padding-bottom: 0.3em;
+    padding: 0.6em 0 0.5em;
     text-align: center;
     font-size: 1.3em;
 }
@@ -110,6 +114,7 @@ main-router {
 }
 
 .panel-body > p {
+	line-height: 18px;
     padding: 1em;
     margin: 0;
 }
@@ -117,7 +122,7 @@ main-router {
 
 #content {
     margin: auto;
-    max-width: 920px;
+    max-width: 980px;
     border-radius: 1em;
     padding-bottom: 1em;
     background-color: rgba(0,0,0,0.1);
@@ -125,7 +130,7 @@ main-router {
 
 .media-body {
     flex: 1;
-    padding-left: 0.3em;
+    padding-left: 0.5em;
 }
 
 .container > * {
@@ -133,28 +138,37 @@ main-router {
 }
 
 .user-info {
+	color: white;
     padding: 1em;
     img {
-        border: 3px solid;
+        border: 2px solid;
         border-radius: 0.5em
     }
-
+	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
+	.user-name{
+		margin-top: 0.2em;
+	}
     .user-screen-name {
+        margin-top: 0.3em;
         font-weight: lighter;
+        padding-right: 0.1em;
     }
 }
 
 .user-counts {
     display: flex;
-    padding: 1em 1em 0em 1em;
+    line-height:16px;
+    padding: 1em 1.5em 0em 1em;
+    text-align: center;
 }
 
 .user-count {
     flex: 1;
 
     h5 {
-        font-weight: lighter;
-        margin: 0;
+    	font-size:1em;
+        font-weight: bolder;
+        margin: 0 0 0.25em;
     }
 }
 
@@ -196,7 +210,7 @@ status-text-container {
     }
 
     .retweet-info {
-        padding: 0.3em;
+        padding: 0.7em 0 0 0.6em;
 
         .media-left {
             display: flex;
@@ -214,6 +228,7 @@ status-text-container {
         small {
             font-weight: lighter;
         }
+        margin-bottom: 0.3em;
     }
 }
 nav {

src/components/attachment/attachment.vue

@@ -39,7 +39,7 @@
       .attachment {
           flex: 1 0 30%;
           display: flex;
-          margin: 0.2em;
+          margin: 0.5em 0.8em 0.6em 0.1em;
           align-self: flex-start;
 
           &.html {
@@ -79,6 +79,7 @@
               img {
                   width: 100%;
               }
+              margin-right: 15px;
           }
 
           .oembed {
@@ -91,6 +92,8 @@
                   img {
                       border: 0px;
                       border-radius: 0;
+                      height: 100%;
+                      object-fit: cover;
                   }
               }
 

src/components/nav_panel/nav_panel.vue

@@ -39,8 +39,7 @@
 
  .nav-panel li {
      border-bottom: 1px solid;
-     padding: 0.5em;
-     padding-left: 1em;
+     padding: 0.75em 0.85em 0.6em;
  }
 
  .nav-panel li:last-child {

src/components/notifications/notifications.scss

 @import '../../_variables.scss';
 .notification {
-  padding: 0.5em;
-  padding-left: 1em;
+  padding: 0.4em 0 0 0.7em;
   display: flex;
   border-bottom: 1px solid silver;
 
   .text {
     min-width: 0px;
     word-wrap: break-word;
+    line-height:18px;
 
     .icon-retweet {
       color: $green;
@@ -18,21 +18,22 @@
     }
 
     h1 {
-      margin: 0;
+      margin: 0 0 0.3em;
       padding: 0;
       font-size: 1em;
+      line-height:20px;
     }
 
-    padding-left: 0.5em;
+    padding: 0.3em 0.8em 0.5em;
     p {
       margin: 0;
       margin-top: 0;
-      margin-bottom: 0.5em;
+      margin-bottom: 0.3em;
     }
   }
 
   .avatar {
-    padding-top: 3px;
+    padding-top: 0.3em;
     width: 32px;
     height: 32px;
     border-radius: 50%;

src/components/post_status_form/post_status_form.vue

@@ -57,13 +57,22 @@
      form {
          display: flex;
          flex-direction: column;
-         padding: 0.5em;
+         padding: 0.6em;
      }
 
      .form-group {
          display: flex;
          flex-direction: column;
+         padding: 0.3em 0.5em 0.6em;
+         line-height:24px;
+     }
+     
+     form textarea {
+         border: none;
+         border-radius: 2px;
+         line-height:16px;
          padding: 0.5em;
+         resize: vertical;
      }
 
      .btn {

src/components/settings/settings.vue

@@ -17,6 +17,6 @@
 
 <style>
  .setting-item {
-   margin: 1em
+   margin: 1em 1em 1.4em;
  }
 </style>

src/components/status/status.vue

@@ -94,6 +94,7 @@
 
      .user-content {
        min-height: 52px;
+       padding-top: 1px;
      }
 
      .source_url {
@@ -106,12 +107,10 @@
 
      a {
          display: inline-block;
-         word-break: break-all;
      }
 
      .status-content {
-         margin-top: 3px;
-         margin-bottom: 3px;
+         margin: 3px 15px 4px 0;
      }
 
      p {
@@ -138,8 +137,7 @@
  }
 
  .status {
-     padding: 0.5em;
-     padding-right: 1em;
+     padding: 0.65em 0.7em 0.8em 0.8em;
      border-bottom: 1px solid;
  }
  .muted button {

src/components/user_profile/user_profile.vue

@@ -19,6 +19,14 @@
          div {
              flex: 1;
          }
+         margin-top: 1em;
+         margin-bottom: -1.2em;
+     }
+     .muteinfo{
+     	margin: 0.5em 0;
+     }
+     .user-screen-name {
+     	margin-top: 0.4em;
      }
  }
 </style>