Fix CSS issues
authorr <r@freesoftwareextremist.com>
Mon, 19 Oct 2020 05:20:57 +0000 (05:20 +0000)
committerr <r@freesoftwareextremist.com>
Mon, 19 Oct 2020 05:20:57 +0000 (05:20 +0000)
static/style.css
templates/emoji.tmpl
templates/nav.tmpl

index 116cbc163682075fc7d7d1cb190e7bb055909a08..0349c2969c99174370433ccdc436e0629f320d54 100644 (file)
@@ -9,7 +9,11 @@
 }
 
 .status-container-container.highlight {
-       background-color: #cccccc;
+       background-color: #eeeeee;
+}
+
+.status-container {
+       display: flex;
 }
 
 .status-content {
@@ -30,9 +34,9 @@
        width: auto;
        max-height: 240px;
        max-width: 280px;
-       width: auto;
        vertical-align: bottom;
        object-fit: contain;
+       margin-bottom: 5px;
 }
 
 .status-media-container {
 
 .status-profile-img-container {
        margin-right: 8px;
-       float: left;
+       display: inline-block;
+       vertical-align: top;
 }
 
 .status-profile-img {
        height: 48px;
        width: 48px;
+       min-height: 48px;
+       min-width: 48px;
+       max-height: 48px;
+       max-width: 48px;
        vertical-align: top;
        object-fit: contain;
+       margin-top: 2px;
 }
 
 .status {
-       overflow: auto;
+       display: inline-block;
+       vertical-align: top;
 }
 
 .status-dname {
 }
 
 .retweet-info {
-       margin: 0 0 2px 24px;   
+       margin: 0 0 4px 24px;
 }
 
 .retweet-info .status-profile-img {
        height: 24px;
        width: 24px;
+       min-height: 24px;
+       min-width: 24px;
+       max-height: 24px;
+       max-width: 24px;
        vertical-align: middle;
 }
 
-.retweet-info .status-dname{
-       margin-left: 4px
+.retweet-info .status-dname {
+       margin-left: 4px;
 }
 
 .post-content {
        padding: 4px;
        font-size: 11pt;
        font-family: initial;
-       max-width: 100%;
+       width: 100%;
+       box-sizing: border-box;
 }
 
 .pagination {
 
 .notification-follow-container {
        overflow: auto;
+       display: flex;
+       align-items: center;
 }
 
 .notification-follow {
        width: 96px;
        vertical-align: top;
        object-fit: contain;
+       margin-top: 2px;
 }
 
 .user-profile-decription {
@@ -275,12 +294,10 @@ a:hover,
 .img-link {
        display: inline-block;
        position: relative;
-       margin: 2.5px 0;
 }
 
 .status-profile-img-container .img-link {
        width: 48px;
-       overflow: hidden;
 }
 
 .status-nsfw-overlay {
@@ -307,30 +324,39 @@ a:hover,
 }
 
 .post-form-field>* {
-  vertical-align: middle;
+       vertical-align: middle;
 }
 
-.emoji-item {
+.emoji-item-container {
        min-width: 220px;
        display: inline-block;
        margin: 4px 0;
 }
 
+.emoji-item {
+       display: flex;
+       align-items: center;
+}
+
 img.emoji {
        height: auto;
        width: auto;
        max-height: 32px;
        max-width: 32px;
+       min-height: 32px;
+       min-width: 32px;
        vertical-align: middle;
+       object-fit: contain;
 }
 
 .status-dname img.emoji {
        height: 24px;
+       min-height: 24px;
+       min-width: 24px;
 }
 
 .emoji-shortcode {
-       vertical-align: middle;
-       display: inline-block;
+       margin-left: 4px;
 }
 
 .post-form-emoji-link {
@@ -342,6 +368,7 @@ img.emoji {
        width: 64px;
        vertical-align: middle;
        object-fit: contain;
+       margin-top: 2px;
 }
 
 .user-info-img-container {
@@ -353,7 +380,8 @@ img.emoji {
        overflow: auto;
 }
 
-.user-info-details-container>div {
+.user-info-details-name,
+.user-info-details-nav {
        margin-bottom: 4px;
 }
 
@@ -367,11 +395,14 @@ img.emoji {
 
 .user-list-item {
        overflow: auto;
+       margin: 0 0 12px 0;
+       display: flex;
+       align-items: center;
 }
 
 .user-list-profile-img {
        float: left;
-       margin: 0 8px 8px 0;
+       margin: 0 8px 0 0;
 }
 
 .user-list-name {
index 7359d81989cd22fcb183a5b06bc1259e03c21f0b..551d6f6befc0d5b198448015877b813ce88b6ed7 100644 (file)
@@ -4,9 +4,11 @@
 
 <div class="emoji-list-container">
        {{range .Emojis}}
-       <div class="emoji-item">
-               <img class="emoji" src="{{.URL}}" alt="{{.ShortCode}}" height="32" />
-               <div class="emoji-shortcode">:{{.ShortCode}}:</div>
+       <div class="emoji-item-container">
+               <div class="emoji-item">
+                       <img class="emoji" src="{{.URL}}" alt="{{.ShortCode}}" height="32" />
+                       <span class="emoji-shortcode">:{{.ShortCode}}:</span>
+               </div>
        </div>
        {{end}}
 </div>
index d98410f5a64eb1ea31d1fdb9c038413776685326..293d210e7a21e8c337d31ebb4f0462e84508a218 100644 (file)
@@ -7,13 +7,13 @@
                </a>
        </div>
        <div class="user-info-details-container">
-               <div>
+               <div class="user-info-details-name">
                        <span class="status-dname"> {{EmojiFilter .User.DisplayName .User.Emojis}} </span>  
                        <a class="nav-link" href="/user/{{.User.ID}}">
                                <span class="status-uname"> @{{.User.Acct}} </span>
                        </a>
                </div>
-               <div>
+               <div class="user-info-details-nav">
                        <a class="nav-link" href="/timeline/home">home</a>
                        <a class="nav-link" href="/timeline/direct">direct</a>
                        <a class="nav-link" href="/timeline/local">local</a>