From b8bd1a8ae6c161263f1cb772283b6249403f25a5 Mon Sep 17 00:00:00 2001
From: Cutls <web-pro@cutls.com>
Date: Wed, 21 Aug 2019 00:02:29 +0900
Subject: [PATCH] Fix CSS

---
 app/css/tl.css            | 57 ++++++++++++++++++++++++++-------------
 app/js/tl/misskeyparse.js |  8 +++---
 app/js/tl/parse.js        | 22 ++++++++-------
 3 files changed, 55 insertions(+), 32 deletions(-)

diff --git a/app/css/tl.css b/app/css/tl.css
index d32e6049..c2412b2c 100644
--- a/app/css/tl.css
+++ b/app/css/tl.css
@@ -94,7 +94,8 @@
     display: none;
   }
 }
-iframe, .cvo video {
+iframe,
+.cvo video {
   max-width: 100%;
   max-height: 300px;
 }
@@ -127,7 +128,7 @@ iframe, .cvo video {
 }
 .marquee {
   width: 100%;
-  padding: .5em 0;
+  padding: 0.5em 0;
   overflow: hidden;
   margin-bottom: 0;
   position: relative;
@@ -143,14 +144,15 @@ iframe, .cvo video {
   animation-iteration-count: infinite;
 }
 @keyframes marquee {
-0% {
-  -webkit-transform: translate(0);
-  transform: translate(0);
-}
-99%, 100% {
-  -webkit-transform: translate(-100%);
-  transform: translate(-100%);
-}
+  0% {
+    -webkit-transform: translate(0);
+    transform: translate(0);
+  }
+  99%,
+  100% {
+    -webkit-transform: translate(-100%);
+    transform: translate(-100%);
+  }
 }
 .boxIn {
   display: flex;
@@ -209,7 +211,8 @@ iframe, .cvo video {
   width: 100%;
   display: grid;
   grid-template-columns: 43px 2fr 1fr;
-  grid-template-areas: "notice notice notice" "icon display_name display_name" "icon toot toot" "vis additional additional" "actions actions side";
+  grid-template-rows: auto 1.6rem 1fr auto 2.5rem;
+  grid-template-areas: "notice notice notice" "icon display_name display_name" "space toot toot" "space additional additional" "vis actions side";
 }
 .cvo h1,
 .cvo h2,
@@ -254,7 +257,8 @@ iframe, .cvo video {
 .area-toot {
   cursor: text;
   user-select: auto;
-  margin: 2px;
+  margin-top: 5px;
+  margin-bottom: 5px;
   margin-left: 5px;
   grid-area: toot;
 }
@@ -276,7 +280,8 @@ iframe, .cvo video {
 .area-actions {
   padding: 0;
   margin: 0;
-  top: -20px;
+  top: -5px;
+  position: relative;
   display: flex;
   justify-content: space-around;
   width: 250px;
@@ -286,9 +291,12 @@ iframe, .cvo video {
 .area-vis {
   margin: 2px;
   grid-area: vis;
+  text-align: center;
 }
 .area-side {
   display: flex;
+  top: -5px;
+  position: relative;
   justify-content: flex-end;
   margin: 2px;
   grid-area: side;
@@ -341,7 +349,7 @@ iframe, .cvo video {
 }
 
 .gray {
-  color: gray;
+  color: #cccccc;
 }
 .sml {
   font-size: 0.8em;
@@ -600,18 +608,31 @@ p:not(:last-child) {
   width: 100%;
   height: 100%;
 }
-.shared.selectedToot{
+.shared.selectedToot {
   background-color: var(--selectedWithShare);
 }
-.selectedToot{
+.selectedToot {
   background-color: var(--selected);
 }
-audio{
+audio {
   height: 2rem;
 }
-.translate{
+.translate {
   white-space: normal;
 }
+.cw_btn {
+  margin: 3px;
+  background-color: var(--emphasized);
+  color: var(--color);
+  padding-left: 3px;
+  padding-right: 3px;
+  border-radius: 3px;
+  border: 1px solid var(--color);
+}
+.vis-data {
+  font-size: 1rem !important;
+  margin: 5px;
+}
 @keyframes jump {
   0% {
     transform: translateY(0);
diff --git a/app/js/tl/misskeyparse.js b/app/js/tl/misskeyparse.js
index 255cd711..554ab916 100644
--- a/app/js/tl/misskeyparse.js
+++ b/app/js/tl/misskeyparse.js
@@ -184,9 +184,9 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 				noticeavatar = toot.user.avatarUrl;
 			}
 			noticeavatar = '<a onclick="udg(\'' + toot.user.id +
-				'\',' + acct_id + ');" user="' + toot.user.username + '" class="udg">' +
+				'\',' + acct_id + ');" user="' + toot.user.username + '" class="udg notf-icon">' +
 				'<img src="' + noticeavatar +
-				'" width="20" class="notf-icon prof-img" user="' + toot.user.username +
+				'" width="20" class="prof-img" user="' + toot.user.username +
 				'"></a>';
 			if (toot.type == "reply") {
 				var what = lang.lang_parse_mentioned;
@@ -375,7 +375,7 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 			var spoiler = "cw cw_hide_" + toot.id;
 			var api_spoil = "gray";
 			var spoiler_show = '<a href="#" onclick="cw_show(\'' + toot.id +
-				'\')" class="nex parsed">' + lang.lang_parse_cwshow + '</a><br>';
+				'\')" class="nex parsed cw_btn">' + lang.lang_parse_cwshow + '</a><br>';
 		} else {
 			var ct1 = nl2br(toot.text).split('<br />').length - 2;
 			var ct2 = nl2br(toot.text).split('<br>').length - 2;
@@ -387,7 +387,7 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 					'</span><span class="gray">' + lang.lang_parse_autofold + '</span>';
 				var spoiler = "cw cw_hide_" + toot.id;
 				var spoiler_show = '<a href="#" onclick="cw_show(\'' + toot.id +
-					'\')" class="nex parsed">' + lang.lang_parse_more + '</a><br>';
+					'\')" class="nex parsed cw_btn">' + lang.lang_parse_more + '</a><br>';
 			} else {
 				var content = escapeHTMLtemp(toot.text);
 				if (toot.cw) {
diff --git a/app/js/tl/parse.js b/app/js/tl/parse.js
index 72750b54..55430bdb 100644
--- a/app/js/tl/parse.js
+++ b/app/js/tl/parse.js
@@ -359,9 +359,9 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 					noticeavatar = toot.account.avatar_static;
 				}
 				noticeavatar = '<a onclick="udg(\'' + toot.account.id +
-					'\',' + acct_id + ');" user="' + toot.account.acct + '" class="udg">' +
+					'\',' + acct_id + ');" user="' + toot.account.acct + '" class="notf-icon udg">' +
 					'<img draggable="false" src="' + noticeavatar +
-					'" width="20" class="notf-icon prof-img" user="' + toot.account.acct +
+					'" width="20" class="prof-img" user="' + toot.account.acct +
 					'"></a>';
 				var rebtxt = lang.lang_parse_btedsimple;
 				var rticon = "fa-retweet light-blue-text";
@@ -376,6 +376,9 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 				var uniqueid = toot.id;
 				var toot = toot.reblog;
 				var dis_name = escapeHTML(toot.account.display_name);
+				if(!dis_name){
+					dis_name = toot.account.acct
+				}
 				if (toot.account.emojis) {
 					var actemojick = toot.account.emojis[0];
 				} else {
@@ -460,7 +463,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 			var spoiler = "cw cw_hide_" + toot.id;
 			var api_spoil = "gray";
 			var spoiler_show = '<a href="#" onclick="cw_show(\'' + toot.id +
-				'\')" class="nex parsed">' + lang.lang_parse_cwshow + '</a><br>';
+				'\')" class="nex parsed cw_btn">' + lang.lang_parse_cwshow + '</a><br>';
 		} else {
 			var ct1 = toot.content.split('</p>').length + toot.content.split('<br />').length - 2;
 			var ct2 = toot.content.split('</p>').length + toot.content.split('<br>').length - 2;
@@ -472,7 +475,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 					'</span><span class="gray">' + lang.lang_parse_autofold + '</span>';
 				var spoiler = "cw cw_hide_" + toot.id;
 				var spoiler_show = '<a href="#" onclick="cw_show(\'' + toot.id +
-					'\')" class="nex parsed">' + lang.lang_parse_more + '</a><br>';
+					'\')" class="nex parsed cw_btn">' + lang.lang_parse_more + '</a><br>';
 			} else {
 				var content = toot.content;
 				var spoil = escapeHTML(toot.spoiler_text);
@@ -647,19 +650,19 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 		var visen = toot.visibility;
 		if (visen == "public") {
 			var vis =
-				'<i class="text-darken-3 material-icons gray sml vis-data pointer" title="' + lang.lang_parse_public + '(' + lang.lang_parse_clickcopy + ')" data-vis="public" onclick="staCopy(\'' + id + '\')" style="font-size:1rem;">public</i>';
+				'<i class="text-darken-3 material-icons gray sml vis-data pointer" title="' + lang.lang_parse_public + '(' + lang.lang_parse_clickcopy + ')" data-vis="public" onclick="staCopy(\'' + id + '\')">public</i>';
 			var can_rt = "";
 		} else if (visen == "unlisted") {
 			var vis =
-				'<i class="text-darken-3 material-icons blue-text vis-data pointer" title="' + lang.lang_parse_unlisted + '(' + lang.lang_parse_clickcopy + ')" data-vis="unlisted" onclick="staCopy(\'' + id + '\')" style="font-size:1rem;">lock_open</i>';
+				'<i class="text-darken-3 material-icons blue-text vis-data pointer" title="' + lang.lang_parse_unlisted + '(' + lang.lang_parse_clickcopy + ')" data-vis="unlisted" onclick="staCopy(\'' + id + '\')">lock_open</i>';
 			var can_rt = "";
 		} else if (visen == "private") {
 			var vis =
-				'<i class="text-darken-3 material-icons orange-text vis-data pointer" title="' + lang.lang_parse_private + '(' + lang.lang_parse_clickcopy + ')" data-vis="private" onclick="staCopy(\'' + id + '\')" style="font-size:1rem;">lock</i>';
+				'<i class="text-darken-3 material-icons orange-text vis-data pointer" title="' + lang.lang_parse_private + '(' + lang.lang_parse_clickcopy + ')" data-vis="private" onclick="staCopy(\'' + id + '\')">lock</i>';
 			var can_rt = "unvisible";
 		} else if (visen == "direct") {
 			var vis =
-				'<i class="text-darken-3 material-icons red-text vis-data pointer" title="' + lang.lang_parse_direct + '(' + lang.lang_parse_clickcopy + ')" data-vis="direct" onclick="staCopy(\'' + id + '\')" style="font-size:1rem;">mail</i>';
+				'<i class="text-darken-3 material-icons red-text vis-data pointer" title="' + lang.lang_parse_direct + '(' + lang.lang_parse_clickcopy + ')" data-vis="direct" onclick="staCopy(\'' + id + '\')">mail</i>';
 			var can_rt = "unvisible";
 		}
 		if (toot.account.acct == localStorage.getItem("user_" + acct_id)) {
@@ -856,9 +859,8 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 			'</div><div class="area-additional"><span class="additional">' + analyze +
 			'</span>' +
 			'' + mentions + tags + '</div>' +
-			'<div class="area-vis"></div>' +
+			'<div class="area-vis">' + vis + '</div>' +
 			'<div class="area-actions ' + mouseover + '">' +
-			'<div class="action">' + vis + '</div>' +
 			'<div class="action ' + antinoauth + '"><a onclick="detEx(\'' + toot.url + '\',\'main\')" class="waves-effect waves-dark details" style="padding:0">' + lang.lang_parse_det + '</a></div>' +
 			'<div class="action ' + antidmHide + '"><a onclick="details(\'' + toot.id + '\',' + acct_id + ',\'' + tlid + '\',\'normal\')" class="waves-effect waves-dark details" style="padding:0">' + lang.lang_parse_thread + '</a></div>' +
 			'<div class="action ' + disp["re"] + ' ' + noauth + '"><a onclick="re(\'' + toot.id +