Fix and Improve: show user data

app/css/userdata.css

@@ -4,6 +4,10 @@
   background-image: url("../../loading.svg");
   overflow-y: hidden;
 }
+#his-data-content {
+  display: flex;
+  justify-content: center;
+}
 #his-name {
   font-size: 1.5rem;
 }
@@ -13,16 +17,17 @@
   margin-right: 5px;
 }
 .his-float {
-  float: left;
   overflow-y: scroll;
   padding: 5px;
 }
 #his-float-data {
-  width: 400px;
   height: 100%;
 }
+#his-leftside {
+  width: 500px;
+}
 #his-float-timeline {
-  width: calc(100% - 400px);
+  max-width: 775px;
   height: 100%;
   overflow-y: hidden;
 }
@@ -61,21 +66,30 @@
 #his-data a:not(.mention) span:last-of-type {
   display: none;
 }
+#his-data a .rep_ct,
+#his-data a .rt_ct,
+#his-data a .fav_ct {
+  display: inline !important;
+}
 #his-data-show {
   margin: 20px;
+  margin-left: 50px;
+  margin-right: 50px;
   background-color: var(--his-data);
-  width: calc(100% - 20px);
   height: calc(100% - 20px);
   margin-bottom: 0;
   padding: 5px;
 }
-.tab-content {
+#his-data-wrap {
+  display: flex;
+}
+.his-var-content {
   overflow-y: scroll;
   overflow-x: hidden;
-  height: calc(100% - 240px);
+  height: calc(100% - 45px);
 }
-.my-data-width {
+#my-data-nav .btn {
-  width: 10%;
+  width: 140px;
 }
 .active-back {
   background-color: var(--active);

app/js/userdata/showOnTL.js

@@ -164,7 +164,7 @@ function udg(user, acct_id) {
 		}
 		$("#his-des").attr("data-acct", acct_id);
 		$('#his-data').css('background-size', 'cover');
-		$("#his-data .tab-content").css("height", $("#his-float-timeline").height() - 70 + "px")
+		$("#his-float-timeline").css("height", $("#his-data-show").height() + "px")
 		localStorage.setItem("history", user);
 		//自分の時
 		if (json.acct == localStorage.getItem("user_" + acct_id)) {
@@ -428,8 +428,8 @@ function hisclose() {
 	localStorage.removeItem("history");
 }
 function reset() {
-	$(".tab-content:eq(0)").show();
+	$(".his-var-content:eq(0)").show();
-	$(".tab-content:gt(0)").hide();
+	$(".his-var-content:gt(0)").hide();
 	$(".active-back").removeClass("active-back");
 	$(".column-first").addClass("active-back");
 	$("#his-name").text("Loading");
@@ -478,10 +478,13 @@ function reset() {
 	$("#his-main-acct").show();
 	$("#his-proof-prof").html("")
 }
-$('#my-data-nav .tab').on('click', function () {
+$('#my-data-nav .anc-link').on('click', function () {
-	var target = $(this).find("a").attr("go");
+	var target = $(this).attr("go");
-	$("#my-data-nav .tab").removeClass("active-back");
+	if(target){
+		$("#my-data-nav .anc-link").removeClass("active-back");
 		$(this).addClass("active-back");
 		$(target).show();
-	$(".tab-content:not(" + target + ")").hide();
+		$(".his-var-content:not(" + target + ")").hide();
+	}
+	
 });

app/view/bg/index.html

@@ -423,7 +423,9 @@
 	<div id="his-data" class="modal bottom-sheet modal-fixed-footer" style="max-height:750px; height:90%;">
 		<div id="his-data-content" class="modal-content" style="padding-bottom: 0;overflow-y:hidden;">
 			<div id="his-data-show">
+				<div id="his-data-wrap">
 					<div class="his-float" id="his-float-data">
+						<div id="his-leftside">
 							<div id="his-basic-prof">
 								<img src="../../img/loading.svg" id="his-prof" draggable="false">
 								<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
@@ -454,81 +456,85 @@
 								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-openin"
 									onclick="profbrws()">Отваряне в браузъра</a>
 								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-my-data"
-							id="his-main-acct" onclick="setMain()" style="width: calc(100% - 10px)">Set it an main account</a><br>
+									id="his-main-acct" onclick="setMain()"
+									style="width: calc(100% - 10px)">Set it an main account</a><br>
 							</div><br>
 							<div id="his-matching-list">
 								Намерете хора подобни на този потребител.<br>
-						Powered by <a href="https://vinayaka.distsn.org/" target="_blank">Mastodon User Matching</a><br>
+								Powered by <a href="https://vinayaka.distsn.org/" target="_blank">Mastodon User
+									Matching</a><br>
 								<div id="his-matching-list-contents" class="cont-series"></div>
-						<button class="btn waves-effect " onclick="showMat()" style="width:100%;">Намери</button>
+								<button class="btn waves-effect " onclick="showMat()"
+									style="width:100%;">Намери</button>
+							</div>
 						</div>
 					</div>
 					<div class="his-float" id="his-float-timeline">
 						<div id="my-data-nav">
-						<ul class="tabs transparent">
+							<a go="#his-tl" title="Времева линия" class="btn active-back column-first anc-link"><i
-							<li class="tab col my-data-width active-back column-first">
+									class="material-icons">timeline</i>Времева линия</a>
-								<a go="#his-tl" title="Времева линия"><i class="material-icons">timeline</i></a>
+							<a go="#his-follow-list" title="Следвам" class="btn anc-link"><i
+									class="material-icons">people</i>→Следвам</a>
+							<a go="#his-follower-list" title="Последователи" class="btn anc-link"><i
+									class="material-icons">people</i>←Последователи</a>
+							<a go="#his-list" title="Списък" class="btn only-his-data anc-link"><i
+									class="material-icons">list</i>Списък</a>
+							<a go="#his-fav-list" title="Любими" class="btn only-my-data anc-link"><i
+									class="material-icons">star</i>Любими</a>
+							<a class="dropdown-trigger btn" href="#" data-target="hisdropdown"><i
+									class="material-icons">more_vert</i>Още</a>
+							<!-- Dropdown Structure -->
+							<ul id="hisdropdown" class="dropdown-content">
+								<li class="anc-link only-my-data" go="#his-blocking-list">
+									<a href="#" title="Блокове"><i class="material-icons">block</i>Блокове</a>
 								</li>
-							<li class="tab col my-data-width">
+								<li class="anc-link only-my-data" go="#his-muting-list">
-								<a go="#his-follow-list" title="Следвам"><i class="material-icons">people</i>→</a>
+									<a href="#" title="Заглуши"><i
+											class="material-icons">voice_over_off</i>Заглуши</a>
 								</li>
-							<li class="tab col my-data-width">
+								<li class="anc-link only-my-data" go="#his-domain-list">
-								<a go="#his-follower-list" title="Последователи"><i
+									<a href="#" title="Блок домейн"><i
-										class="material-icons">people</i>←</a>
+											class="material-icons">language</i>Блок домейн</a>
 								</li>
-							<li class="tab col my-data-width only-his-data">
+								<li class="anc-link only-my-data" go="#his-prof-list">
-								<a go="#his-action" title="Свързан-профил"><i
+									<a href="#" title="Редактиране на профила"><i
-										class="material-icons">account_box</i></a>
+											class="material-icons">create</i>Редактиране на профила</a>
 								</li>
-							<li class="tab col my-data-width only-his-data">
+								<li class="anc-link only-my-data" go="#his-request-list">
-								<a go="#his-list" title="Списък"><i class="material-icons">list</i></a>
+									<a href="#" title="Следвайте исканията"><i
+											class="material-icons">how_to_reg</i>Следвайте исканията</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link only-my-data" go="#his-follow-recom-list">
-								<a go="#his-fav-list" title="Любими"><i class="material-icons">star</i></a>
+									<a href="#" title="Предложени"><i class="material-icons">recent_actors</i>Предложени</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link only-his-data" go="#his-action">
-								<a go="#his-blocking-list" title="Блокове"><i class="material-icons">block</i></a>
+									<a href="#" title="Свързан-профил"><i
+											class="material-icons">account_box</i>Свързан-профил</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="only-his-data">
-								<a go="#his-muting-list" title="Заглуши"><i
+									<a href="#">Coming soon...</a>
-										class="material-icons">voice_over_off</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-domain-list" title="Блок домейн"><i
-										class="material-icons">language</i><i class="material-icons">block</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-prof-list" title="Редактиране на профила"><i class="material-icons">create</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-request-list" title="Следвайте исканията"><i
-										class="material-icons">how_to_reg</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-follow-recom-list" title="Предложени"><i
-										class="material-icons">recent_actors</i></a>
 								</li>
 							</ul>
 						</div>
-					<div id="his-tl" class="tab-content">
+						<div id="his-tl" class="his-var-content">
 							<div id="his-tl-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="utl('--now','more')">Още</button>
 						</div>
-					<div id="his-follow-list" class="tab-content">
+						<div id="his-follow-list" class="his-var-content">
 							<div id="his-follow-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="flw('--now','more')">Още</button>
 						</div>
-					<div id="his-follower-list" class="tab-content">
+						<div id="his-follower-list" class="his-var-content">
 							<div id="his-follower-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="fer('--now','more')">Още</button>
 						</div>
-					<div id="his-action" class="tab-content">
+						<div id="his-action" class="his-var-content">
 							Използване на друг профил да се Следвам((Невъзможно да се спре на следването))<br>
 							<div style="max-width:500px;"><select id="user-acct-sel" class="acct-sel"></select></div>
 							
@@ -537,30 +543,30 @@
 							<a href="#!" class="waves-effect btn"
 								onclick="udgEx('selector', 'selector')">Показване на профила</a><br>
 						</div>
-					<div id="his-list" class="tab-content">
+						<div id="his-list" class="his-var-content">
 							<div id="his-lists-a">Следвайте, за да добавите този потребител към списъците.</div>
 
 							<div id="his-lists-b"></div>
 						</div>
-					<div id="his-fav-list" class="tab-content">
+						<div id="his-fav-list" class="his-var-content">
 							<div id="his-fav-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect" style="width:100%; padding:0;"
 								onclick="showFav('more')">Още</button>
 						</div>
-					<div id="his-blocking-list" class="tab-content">
+						<div id="his-blocking-list" class="his-var-content">
 							<div id="his-blocking-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showBlo('more')">Още</button>
 						</div>
-					<div id="his-muting-list" class="tab-content">
+						<div id="his-muting-list" class="his-var-content">
 							<div id="his-muting-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showMut('more')">Още</button>
 						</div>
-					<div id="his-domain-list" class="tab-content">
+						<div id="his-domain-list" class="his-var-content">
 							<div id="his-domain-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
@@ -570,13 +576,14 @@
 							<button class="btn waves-effect" onclick="addDomainblock()">Добави</button>
 							<br>
 						</div>
-					<div id="his-prof-list" class="tab-content">Показвано име
+						<div id="his-prof-list" class="his-var-content">Показвано име
 							<br>
 							<input type="text" placeholder="Показвано име" id="his-name-val" style="max-width:250px;">
 							<br>Бележка
 							<br>
 							<div class="input-field col s12">
-							<textarea placeholder="Бележка" id="his-des-val" class="materialize-textarea"></textarea>
+								<textarea placeholder="Бележка" id="his-des-val"
+									class="materialize-textarea"></textarea>
 								<label for="his-des-val">Бележка</label>
 							</div>
 							<button class="btn waves-effect" style="width:100%; padding:0;"
@@ -590,13 +597,13 @@
 								<input type="file" onchange="imgChange(this,'header')">
 							</span>
 						</div>
-					<div id="his-request-list" class="tab-content">
+						<div id="his-request-list" class="his-var-content">
 							<div id="his-request-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showReq('more')">Още</button>
 						</div>
-					<div id="his-follow-recom-list" class="tab-content">
+						<div id="his-follow-recom-list" class="his-var-content">
 							<div id="his-follow-recom-contents" class="cont-series">
 							</div>
 						</div>
@@ -606,6 +613,7 @@
 					</div>
 				</div>
 			</div>
+		</div>
 		<div class="modal-footer">
 			<button class="modal-action waves-effect waves-green btn-flat" id="his-history-btn"
 				onclick="historyShow()">Назад</button>

app/view/cs/index.html

@@ -423,7 +423,9 @@
 	<div id="his-data" class="modal bottom-sheet modal-fixed-footer" style="max-height:750px; height:90%;">
 		<div id="his-data-content" class="modal-content" style="padding-bottom: 0;overflow-y:hidden;">
 			<div id="his-data-show">
+				<div id="his-data-wrap">
 					<div class="his-float" id="his-float-data">
+						<div id="his-leftside">
 							<div id="his-basic-prof">
 								<img src="../../img/loading.svg" id="his-prof" draggable="false">
 								<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
@@ -454,81 +456,85 @@
 								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-openin"
 									onclick="profbrws()">Open in browser</a>
 								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-my-data"
-							id="his-main-acct" onclick="setMain()" style="width: calc(100% - 10px)">Set it an main account</a><br>
+									id="his-main-acct" onclick="setMain()"
+									style="width: calc(100% - 10px)">Set it an main account</a><br>
 							</div><br>
 							<div id="his-matching-list">
 								Get people resembling this user.<br>
-						Powered by <a href="https://vinayaka.distsn.org/" target="_blank">Mastodon User Matching</a><br>
+								Powered by <a href="https://vinayaka.distsn.org/" target="_blank">Mastodon User
+									Matching</a><br>
 								<div id="his-matching-list-contents" class="cont-series"></div>
-						<button class="btn waves-effect " onclick="showMat()" style="width:100%;">Get</button>
+								<button class="btn waves-effect " onclick="showMat()"
+									style="width:100%;">Get</button>
+							</div>
 						</div>
 					</div>
 					<div class="his-float" id="his-float-timeline">
 						<div id="my-data-nav">
-						<ul class="tabs transparent">
+							<a go="#his-tl" title="Časová osa" class="btn active-back column-first anc-link"><i
-							<li class="tab col my-data-width active-back column-first">
+									class="material-icons">timeline</i>Časová osa</a>
-								<a go="#his-tl" title="Časová osa"><i class="material-icons">timeline</i></a>
+							<a go="#his-follow-list" title="Sledovat" class="btn anc-link"><i
+									class="material-icons">people</i>→Sledovat</a>
+							<a go="#his-follower-list" title="Sledující" class="btn anc-link"><i
+									class="material-icons">people</i>←Sledující</a>
+							<a go="#his-list" title="Seznam" class="btn only-his-data anc-link"><i
+									class="material-icons">list</i>Seznam</a>
+							<a go="#his-fav-list" title="Oblíbit" class="btn only-my-data anc-link"><i
+									class="material-icons">star</i>Oblíbit</a>
+							<a class="dropdown-trigger btn" href="#" data-target="hisdropdown"><i
+									class="material-icons">more_vert</i>More</a>
+							<!-- Dropdown Structure -->
+							<ul id="hisdropdown" class="dropdown-content">
+								<li class="anc-link only-my-data" go="#his-blocking-list">
+									<a href="#" title="Blocks"><i class="material-icons">block</i>Blocks</a>
 								</li>
-							<li class="tab col my-data-width">
+								<li class="anc-link only-my-data" go="#his-muting-list">
-								<a go="#his-follow-list" title="Sledovat"><i class="material-icons">people</i>→</a>
+									<a href="#" title="Mute"><i
+											class="material-icons">voice_over_off</i>Mute</a>
 								</li>
-							<li class="tab col my-data-width">
+								<li class="anc-link only-my-data" go="#his-domain-list">
-								<a go="#his-follower-list" title="Sledující"><i
+									<a href="#" title="Domain block"><i
-										class="material-icons">people</i>←</a>
+											class="material-icons">language</i>Domain block</a>
 								</li>
-							<li class="tab col my-data-width only-his-data">
+								<li class="anc-link only-my-data" go="#his-prof-list">
-								<a go="#his-action" title="Cross-account"><i
+									<a href="#" title="Edit profile"><i
-										class="material-icons">account_box</i></a>
+											class="material-icons">create</i>Edit profile</a>
 								</li>
-							<li class="tab col my-data-width only-his-data">
+								<li class="anc-link only-my-data" go="#his-request-list">
-								<a go="#his-list" title="Seznam"><i class="material-icons">list</i></a>
+									<a href="#" title="Follow requests"><i
+											class="material-icons">how_to_reg</i>Follow requests</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link only-my-data" go="#his-follow-recom-list">
-								<a go="#his-fav-list" title="Oblíbit"><i class="material-icons">star</i></a>
+									<a href="#" title="Suggest"><i class="material-icons">recent_actors</i>Suggest</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link only-his-data" go="#his-action">
-								<a go="#his-blocking-list" title="Blocks"><i class="material-icons">block</i></a>
+									<a href="#" title="Cross-account"><i
+											class="material-icons">account_box</i>Cross-account</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="only-his-data">
-								<a go="#his-muting-list" title="Mute"><i
+									<a href="#">Coming soon...</a>
-										class="material-icons">voice_over_off</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-domain-list" title="Domain block"><i
-										class="material-icons">language</i><i class="material-icons">block</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-prof-list" title="Edit profile"><i class="material-icons">create</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-request-list" title="Follow requests"><i
-										class="material-icons">how_to_reg</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-follow-recom-list" title="Suggest"><i
-										class="material-icons">recent_actors</i></a>
 								</li>
 							</ul>
 						</div>
-					<div id="his-tl" class="tab-content">
+						<div id="his-tl" class="his-var-content">
 							<div id="his-tl-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="utl('--now','more')">More</button>
 						</div>
-					<div id="his-follow-list" class="tab-content">
+						<div id="his-follow-list" class="his-var-content">
 							<div id="his-follow-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="flw('--now','more')">More</button>
 						</div>
-					<div id="his-follower-list" class="tab-content">
+						<div id="his-follower-list" class="his-var-content">
 							<div id="his-follower-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="fer('--now','more')">More</button>
 						</div>
-					<div id="his-action" class="tab-content">
+						<div id="his-action" class="his-var-content">
 							Použít jiný účet to Sledovat((Unable to unfollow))<br>
 							<div style="max-width:500px;"><select id="user-acct-sel" class="acct-sel"></select></div>
 							
@@ -537,30 +543,30 @@
 							<a href="#!" class="waves-effect btn"
 								onclick="udgEx('selector', 'selector')">Show profile</a><br>
 						</div>
-					<div id="his-list" class="tab-content">
+						<div id="his-list" class="his-var-content">
 							<div id="his-lists-a">Follow to add this user to lists.</div>
 
 							<div id="his-lists-b"></div>
 						</div>
-					<div id="his-fav-list" class="tab-content">
+						<div id="his-fav-list" class="his-var-content">
 							<div id="his-fav-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect" style="width:100%; padding:0;"
 								onclick="showFav('more')">More</button>
 						</div>
-					<div id="his-blocking-list" class="tab-content">
+						<div id="his-blocking-list" class="his-var-content">
 							<div id="his-blocking-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showBlo('more')">More</button>
 						</div>
-					<div id="his-muting-list" class="tab-content">
+						<div id="his-muting-list" class="his-var-content">
 							<div id="his-muting-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showMut('more')">More</button>
 						</div>
-					<div id="his-domain-list" class="tab-content">
+						<div id="his-domain-list" class="his-var-content">
 							<div id="his-domain-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
@@ -570,13 +576,14 @@
 							<button class="btn waves-effect" onclick="addDomainblock()">Přidat</button>
 							<br>
 						</div>
-					<div id="his-prof-list" class="tab-content">Display name
+						<div id="his-prof-list" class="his-var-content">Display name
 							<br>
 							<input type="text" placeholder="Display name" id="his-name-val" style="max-width:250px;">
 							<br>Note
 							<br>
 							<div class="input-field col s12">
-							<textarea placeholder="Note" id="his-des-val" class="materialize-textarea"></textarea>
+								<textarea placeholder="Note" id="his-des-val"
+									class="materialize-textarea"></textarea>
 								<label for="his-des-val">Note</label>
 							</div>
 							<button class="btn waves-effect" style="width:100%; padding:0;"
@@ -590,13 +597,13 @@
 								<input type="file" onchange="imgChange(this,'header')">
 							</span>
 						</div>
-					<div id="his-request-list" class="tab-content">
+						<div id="his-request-list" class="his-var-content">
 							<div id="his-request-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showReq('more')">More</button>
 						</div>
-					<div id="his-follow-recom-list" class="tab-content">
+						<div id="his-follow-recom-list" class="his-var-content">
 							<div id="his-follow-recom-contents" class="cont-series">
 							</div>
 						</div>
@@ -606,6 +613,7 @@
 					</div>
 				</div>
 			</div>
+		</div>
 		<div class="modal-footer">
 			<button class="modal-action waves-effect waves-green btn-flat" id="his-history-btn"
 				onclick="historyShow()">Zpět</button>

app/view/de/index.html

@@ -423,7 +423,9 @@
 	<div id="his-data" class="modal bottom-sheet modal-fixed-footer" style="max-height:750px; height:90%;">
 		<div id="his-data-content" class="modal-content" style="padding-bottom: 0;overflow-y:hidden;">
 			<div id="his-data-show">
+				<div id="his-data-wrap">
 					<div class="his-float" id="his-float-data">
+						<div id="his-leftside">
 							<div id="his-basic-prof">
 								<img src="../../img/loading.svg" id="his-prof" draggable="false">
 								<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
@@ -454,81 +456,85 @@
 								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-openin"
 									onclick="profbrws()">Im Browser öffnen</a>
 								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-my-data"
-							id="his-main-acct" onclick="setMain()" style="width: calc(100% - 10px)">Im Hauptkonto einstellen</a><br>
+									id="his-main-acct" onclick="setMain()"
+									style="width: calc(100% - 10px)">Im Hauptkonto einstellen</a><br>
 							</div><br>
 							<div id="his-matching-list">
 								Get people resembling this user.<br>
-						Powered by <a href="https://vinayaka.distsn.org/" target="_blank">Mastodon User Matching</a><br>
+								Powered by <a href="https://vinayaka.distsn.org/" target="_blank">Mastodon User
+									Matching</a><br>
 								<div id="his-matching-list-contents" class="cont-series"></div>
-						<button class="btn waves-effect " onclick="showMat()" style="width:100%;">Holen</button>
+								<button class="btn waves-effect " onclick="showMat()"
+									style="width:100%;">Holen</button>
+							</div>
 						</div>
 					</div>
 					<div class="his-float" id="his-float-timeline">
 						<div id="my-data-nav">
-						<ul class="tabs transparent">
+							<a go="#his-tl" title="Verlauf" class="btn active-back column-first anc-link"><i
-							<li class="tab col my-data-width active-back column-first">
+									class="material-icons">timeline</i>Verlauf</a>
-								<a go="#his-tl" title="Verlauf"><i class="material-icons">timeline</i></a>
+							<a go="#his-follow-list" title="Folgen" class="btn anc-link"><i
+									class="material-icons">people</i>→Folgen</a>
+							<a go="#his-follower-list" title="Abonnenten" class="btn anc-link"><i
+									class="material-icons">people</i>←Abonnenten</a>
+							<a go="#his-list" title="Liste" class="btn only-his-data anc-link"><i
+									class="material-icons">list</i>Liste</a>
+							<a go="#his-fav-list" title="Favoriten" class="btn only-my-data anc-link"><i
+									class="material-icons">star</i>Favoriten</a>
+							<a class="dropdown-trigger btn" href="#" data-target="hisdropdown"><i
+									class="material-icons">more_vert</i>Mehr</a>
+							<!-- Dropdown Structure -->
+							<ul id="hisdropdown" class="dropdown-content">
+								<li class="anc-link only-my-data" go="#his-blocking-list">
+									<a href="#" title="Blockiert"><i class="material-icons">block</i>Blockiert</a>
 								</li>
-							<li class="tab col my-data-width">
+								<li class="anc-link only-my-data" go="#his-muting-list">
-								<a go="#his-follow-list" title="Folgen"><i class="material-icons">people</i>→</a>
+									<a href="#" title="Stummschalten"><i
+											class="material-icons">voice_over_off</i>Stummschalten</a>
 								</li>
-							<li class="tab col my-data-width">
+								<li class="anc-link only-my-data" go="#his-domain-list">
-								<a go="#his-follower-list" title="Abonnenten"><i
+									<a href="#" title="Domain block"><i
-										class="material-icons">people</i>←</a>
+											class="material-icons">language</i>Domain block</a>
 								</li>
-							<li class="tab col my-data-width only-his-data">
+								<li class="anc-link only-my-data" go="#his-prof-list">
-								<a go="#his-action" title="Cross-Account"><i
+									<a href="#" title="Profil bearbeiten"><i
-										class="material-icons">account_box</i></a>
+											class="material-icons">create</i>Profil bearbeiten</a>
 								</li>
-							<li class="tab col my-data-width only-his-data">
+								<li class="anc-link only-my-data" go="#his-request-list">
-								<a go="#his-list" title="Liste"><i class="material-icons">list</i></a>
+									<a href="#" title="Anfragen folgen"><i
+											class="material-icons">how_to_reg</i>Anfragen folgen</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link only-my-data" go="#his-follow-recom-list">
-								<a go="#his-fav-list" title="Favoriten"><i class="material-icons">star</i></a>
+									<a href="#" title="Vorschlagen"><i class="material-icons">recent_actors</i>Vorschlagen</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link only-his-data" go="#his-action">
-								<a go="#his-blocking-list" title="Blockiert"><i class="material-icons">block</i></a>
+									<a href="#" title="Cross-Account"><i
+											class="material-icons">account_box</i>Cross-Account</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="only-his-data">
-								<a go="#his-muting-list" title="Stummschalten"><i
+									<a href="#">Coming soon...</a>
-										class="material-icons">voice_over_off</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-domain-list" title="Domain block"><i
-										class="material-icons">language</i><i class="material-icons">block</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-prof-list" title="Profil bearbeiten"><i class="material-icons">create</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-request-list" title="Anfragen folgen"><i
-										class="material-icons">how_to_reg</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-follow-recom-list" title="Vorschlagen"><i
-										class="material-icons">recent_actors</i></a>
 								</li>
 							</ul>
 						</div>
-					<div id="his-tl" class="tab-content">
+						<div id="his-tl" class="his-var-content">
 							<div id="his-tl-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="utl('--now','more')">Mehr</button>
 						</div>
-					<div id="his-follow-list" class="tab-content">
+						<div id="his-follow-list" class="his-var-content">
 							<div id="his-follow-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="flw('--now','more')">Mehr</button>
 						</div>
-					<div id="his-follower-list" class="tab-content">
+						<div id="his-follower-list" class="his-var-content">
 							<div id="his-follower-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="fer('--now','more')">Mehr</button>
 						</div>
-					<div id="his-action" class="tab-content">
+						<div id="his-action" class="his-var-content">
 							Anderes Konto verwenden an Folgen((Unable to unfollow))<br>
 							<div style="max-width:500px;"><select id="user-acct-sel" class="acct-sel"></select></div>
 							
@@ -537,30 +543,30 @@
 							<a href="#!" class="waves-effect btn"
 								onclick="udgEx('selector', 'selector')">Benutzerprofil</a><br>
 						</div>
-					<div id="his-list" class="tab-content">
+						<div id="his-list" class="his-var-content">
 							<div id="his-lists-a">Folgen, um diesen Benutzer zu Listen hinzuzufügen.</div>
 
 							<div id="his-lists-b"></div>
 						</div>
-					<div id="his-fav-list" class="tab-content">
+						<div id="his-fav-list" class="his-var-content">
 							<div id="his-fav-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect" style="width:100%; padding:0;"
 								onclick="showFav('more')">Mehr</button>
 						</div>
-					<div id="his-blocking-list" class="tab-content">
+						<div id="his-blocking-list" class="his-var-content">
 							<div id="his-blocking-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showBlo('more')">Mehr</button>
 						</div>
-					<div id="his-muting-list" class="tab-content">
+						<div id="his-muting-list" class="his-var-content">
 							<div id="his-muting-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showMut('more')">Mehr</button>
 						</div>
-					<div id="his-domain-list" class="tab-content">
+						<div id="his-domain-list" class="his-var-content">
 							<div id="his-domain-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
@@ -570,13 +576,14 @@
 							<button class="btn waves-effect" onclick="addDomainblock()">Hinzufügen</button>
 							<br>
 						</div>
-					<div id="his-prof-list" class="tab-content">Anzeigename
+						<div id="his-prof-list" class="his-var-content">Anzeigename
 							<br>
 							<input type="text" placeholder="Anzeigename" id="his-name-val" style="max-width:250px;">
 							<br>Notiz
 							<br>
 							<div class="input-field col s12">
-							<textarea placeholder="Notiz" id="his-des-val" class="materialize-textarea"></textarea>
+								<textarea placeholder="Notiz" id="his-des-val"
+									class="materialize-textarea"></textarea>
 								<label for="his-des-val">Notiz</label>
 							</div>
 							<button class="btn waves-effect" style="width:100%; padding:0;"
@@ -590,13 +597,13 @@
 								<input type="file" onchange="imgChange(this,'header')">
 							</span>
 						</div>
-					<div id="his-request-list" class="tab-content">
+						<div id="his-request-list" class="his-var-content">
 							<div id="his-request-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showReq('more')">Mehr</button>
 						</div>
-					<div id="his-follow-recom-list" class="tab-content">
+						<div id="his-follow-recom-list" class="his-var-content">
 							<div id="his-follow-recom-contents" class="cont-series">
 							</div>
 						</div>
@@ -606,6 +613,7 @@
 					</div>
 				</div>
 			</div>
+		</div>
 		<div class="modal-footer">
 			<button class="modal-action waves-effect waves-green btn-flat" id="his-history-btn"
 				onclick="historyShow()">Zurück</button>

app/view/en/index.html

@@ -423,7 +423,9 @@
 	<div id="his-data" class="modal bottom-sheet modal-fixed-footer" style="max-height:750px; height:90%;">
 		<div id="his-data-content" class="modal-content" style="padding-bottom: 0;overflow-y:hidden;">
 			<div id="his-data-show">
+				<div id="his-data-wrap">
 					<div class="his-float" id="his-float-data">
+						<div id="his-leftside">
 							<div id="his-basic-prof">
 								<img src="../../img/loading.svg" id="his-prof" draggable="false">
 								<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
@@ -454,81 +456,85 @@
 								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-openin"
 									onclick="profbrws()">Open in browser</a>
 								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-my-data"
-							id="his-main-acct" onclick="setMain()" style="width: calc(100% - 10px)">Set it an main account</a><br>
+									id="his-main-acct" onclick="setMain()"
+									style="width: calc(100% - 10px)">Set it an main account</a><br>
 							</div><br>
 							<div id="his-matching-list">
 								Get people resembling this user.<br>
-						Powered by <a href="https://vinayaka.distsn.org/" target="_blank">Mastodon User Matching</a><br>
+								Powered by <a href="https://vinayaka.distsn.org/" target="_blank">Mastodon User
+									Matching</a><br>
 								<div id="his-matching-list-contents" class="cont-series"></div>
-						<button class="btn waves-effect " onclick="showMat()" style="width:100%;">Get</button>
+								<button class="btn waves-effect " onclick="showMat()"
+									style="width:100%;">Get</button>
+							</div>
 						</div>
 					</div>
 					<div class="his-float" id="his-float-timeline">
 						<div id="my-data-nav">
-						<ul class="tabs transparent">
+							<a go="#his-tl" title="Timeline" class="btn active-back column-first anc-link"><i
-							<li class="tab col my-data-width active-back column-first">
+									class="material-icons">timeline</i>Timeline</a>
-								<a go="#his-tl" title="Timeline"><i class="material-icons">timeline</i></a>
+							<a go="#his-follow-list" title="Follow" class="btn anc-link"><i
+									class="material-icons">people</i>→Follow</a>
+							<a go="#his-follower-list" title="Follower" class="btn anc-link"><i
+									class="material-icons">people</i>←Follower</a>
+							<a go="#his-list" title="List" class="btn only-his-data anc-link"><i
+									class="material-icons">list</i>List</a>
+							<a go="#his-fav-list" title="Favourite" class="btn only-my-data anc-link"><i
+									class="material-icons">star</i>Favourite</a>
+							<a class="dropdown-trigger btn" href="#" data-target="hisdropdown"><i
+									class="material-icons">more_vert</i>More</a>
+							<!-- Dropdown Structure -->
+							<ul id="hisdropdown" class="dropdown-content">
+								<li class="anc-link only-my-data" go="#his-blocking-list">
+									<a href="#" title="Blocks"><i class="material-icons">block</i>Blocks</a>
 								</li>
-							<li class="tab col my-data-width">
+								<li class="anc-link only-my-data" go="#his-muting-list">
-								<a go="#his-follow-list" title="Follow"><i class="material-icons">people</i>→</a>
+									<a href="#" title="Mute"><i
+											class="material-icons">voice_over_off</i>Mute</a>
 								</li>
-							<li class="tab col my-data-width">
+								<li class="anc-link only-my-data" go="#his-domain-list">
-								<a go="#his-follower-list" title="Follower"><i
+									<a href="#" title="Domain block"><i
-										class="material-icons">people</i>←</a>
+											class="material-icons">language</i>Domain block</a>
 								</li>
-							<li class="tab col my-data-width only-his-data">
+								<li class="anc-link only-my-data" go="#his-prof-list">
-								<a go="#his-action" title="Cross-account"><i
+									<a href="#" title="Edit profile"><i
-										class="material-icons">account_box</i></a>
+											class="material-icons">create</i>Edit profile</a>
 								</li>
-							<li class="tab col my-data-width only-his-data">
+								<li class="anc-link only-my-data" go="#his-request-list">
-								<a go="#his-list" title="List"><i class="material-icons">list</i></a>
+									<a href="#" title="Follow requests"><i
+											class="material-icons">how_to_reg</i>Follow requests</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link only-my-data" go="#his-follow-recom-list">
-								<a go="#his-fav-list" title="Favourite"><i class="material-icons">star</i></a>
+									<a href="#" title="Suggest"><i class="material-icons">recent_actors</i>Suggest</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link only-his-data" go="#his-action">
-								<a go="#his-blocking-list" title="Blocks"><i class="material-icons">block</i></a>
+									<a href="#" title="Cross-account"><i
+											class="material-icons">account_box</i>Cross-account</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="only-his-data">
-								<a go="#his-muting-list" title="Mute"><i
+									<a href="#">Coming soon...</a>
-										class="material-icons">voice_over_off</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-domain-list" title="Domain block"><i
-										class="material-icons">language</i><i class="material-icons">block</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-prof-list" title="Edit profile"><i class="material-icons">create</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-request-list" title="Follow requests"><i
-										class="material-icons">how_to_reg</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-follow-recom-list" title="Suggest"><i
-										class="material-icons">recent_actors</i></a>
 								</li>
 							</ul>
 						</div>
-					<div id="his-tl" class="tab-content">
+						<div id="his-tl" class="his-var-content">
 							<div id="his-tl-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="utl('--now','more')">More</button>
 						</div>
-					<div id="his-follow-list" class="tab-content">
+						<div id="his-follow-list" class="his-var-content">
 							<div id="his-follow-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="flw('--now','more')">More</button>
 						</div>
-					<div id="his-follower-list" class="tab-content">
+						<div id="his-follower-list" class="his-var-content">
 							<div id="his-follower-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="fer('--now','more')">More</button>
 						</div>
-					<div id="his-action" class="tab-content">
+						<div id="his-action" class="his-var-content">
 							Use other account to Follow((Unable to unfollow))<br>
 							<div style="max-width:500px;"><select id="user-acct-sel" class="acct-sel"></select></div>
 							
@@ -537,30 +543,30 @@
 							<a href="#!" class="waves-effect btn"
 								onclick="udgEx('selector', 'selector')">Show profile</a><br>
 						</div>
-					<div id="his-list" class="tab-content">
+						<div id="his-list" class="his-var-content">
 							<div id="his-lists-a">Follow to add this user to lists.</div>
 
 							<div id="his-lists-b"></div>
 						</div>
-					<div id="his-fav-list" class="tab-content">
+						<div id="his-fav-list" class="his-var-content">
 							<div id="his-fav-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect" style="width:100%; padding:0;"
 								onclick="showFav('more')">More</button>
 						</div>
-					<div id="his-blocking-list" class="tab-content">
+						<div id="his-blocking-list" class="his-var-content">
 							<div id="his-blocking-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showBlo('more')">More</button>
 						</div>
-					<div id="his-muting-list" class="tab-content">
+						<div id="his-muting-list" class="his-var-content">
 							<div id="his-muting-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showMut('more')">More</button>
 						</div>
-					<div id="his-domain-list" class="tab-content">
+						<div id="his-domain-list" class="his-var-content">
 							<div id="his-domain-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
@@ -570,13 +576,14 @@
 							<button class="btn waves-effect" onclick="addDomainblock()">Add</button>
 							<br>
 						</div>
-					<div id="his-prof-list" class="tab-content">Display name
+						<div id="his-prof-list" class="his-var-content">Display name
 							<br>
 							<input type="text" placeholder="Display name" id="his-name-val" style="max-width:250px;">
 							<br>Note
 							<br>
 							<div class="input-field col s12">
-							<textarea placeholder="Note" id="his-des-val" class="materialize-textarea"></textarea>
+								<textarea placeholder="Note" id="his-des-val"
+									class="materialize-textarea"></textarea>
 								<label for="his-des-val">Note</label>
 							</div>
 							<button class="btn waves-effect" style="width:100%; padding:0;"
@@ -590,13 +597,13 @@
 								<input type="file" onchange="imgChange(this,'header')">
 							</span>
 						</div>
-					<div id="his-request-list" class="tab-content">
+						<div id="his-request-list" class="his-var-content">
 							<div id="his-request-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showReq('more')">More</button>
 						</div>
-					<div id="his-follow-recom-list" class="tab-content">
+						<div id="his-follow-recom-list" class="his-var-content">
 							<div id="his-follow-recom-contents" class="cont-series">
 							</div>
 						</div>
@@ -606,6 +613,7 @@
 					</div>
 				</div>
 			</div>
+		</div>
 		<div class="modal-footer">
 			<button class="modal-action waves-effect waves-green btn-flat" id="his-history-btn"
 				onclick="historyShow()">Back</button>

app/view/ja/index.html

@@ -423,7 +423,9 @@
 	<div id="his-data" class="modal bottom-sheet modal-fixed-footer" style="max-height:750px; height:90%;">
 		<div id="his-data-content" class="modal-content" style="padding-bottom: 0;overflow-y:hidden;">
 			<div id="his-data-show">
+				<div id="his-data-wrap">
 					<div class="his-float" id="his-float-data">
+						<div id="his-leftside">
 							<div id="his-basic-prof">
 								<img src="../../img/loading.svg" id="his-prof" draggable="false">
 								<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
@@ -454,81 +456,85 @@
 								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-openin"
 									onclick="profbrws()">ブラウザで開く</a>
 								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-my-data"
-							id="his-main-acct" onclick="setMain()" style="width: calc(100% - 10px)">メインアカウントに設定</a><br>
+									id="his-main-acct" onclick="setMain()"
+									style="width: calc(100% - 10px)">メインアカウントに設定</a><br>
 							</div><br>
 							<div id="his-matching-list">
 								似ているユーザーを取得できます。<br>
-						Powered by <a href="https://vinayaka.distsn.org/" target="_blank">Mastodon User Matching</a><br>
+								Powered by <a href="https://vinayaka.distsn.org/" target="_blank">Mastodon User
+									Matching</a><br>
 								<div id="his-matching-list-contents" class="cont-series"></div>
-						<button class="btn waves-effect " onclick="showMat()" style="width:100%;">取得</button>
+								<button class="btn waves-effect " onclick="showMat()"
+									style="width:100%;">取得</button>
+							</div>
 						</div>
 					</div>
 					<div class="his-float" id="his-float-timeline">
 						<div id="my-data-nav">
-						<ul class="tabs transparent">
+							<a go="#his-tl" title="タイムライン" class="btn active-back column-first anc-link"><i
-							<li class="tab col my-data-width active-back column-first">
+									class="material-icons">timeline</i>タイムライン</a>
-								<a go="#his-tl" title="タイムライン"><i class="material-icons">timeline</i></a>
+							<a go="#his-follow-list" title="フォロー" class="btn anc-link"><i
+									class="material-icons">people</i>→フォロー</a>
+							<a go="#his-follower-list" title="フォロワー" class="btn anc-link"><i
+									class="material-icons">people</i>←フォロワー</a>
+							<a go="#his-list" title="リスト" class="btn only-his-data anc-link"><i
+									class="material-icons">list</i>リスト</a>
+							<a go="#his-fav-list" title="お気に入り" class="btn only-my-data anc-link"><i
+									class="material-icons">star</i>お気に入り</a>
+							<a class="dropdown-trigger btn" href="#" data-target="hisdropdown"><i
+									class="material-icons">more_vert</i>もっと</a>
+							<!-- Dropdown Structure -->
+							<ul id="hisdropdown" class="dropdown-content">
+								<li class="anc-link only-my-data" go="#his-blocking-list">
+									<a href="#" title="ブロック"><i class="material-icons">block</i>ブロック</a>
 								</li>
-							<li class="tab col my-data-width">
+								<li class="anc-link only-my-data" go="#his-muting-list">
-								<a go="#his-follow-list" title="フォロー"><i class="material-icons">people</i>→</a>
+									<a href="#" title="ミュート"><i
+											class="material-icons">voice_over_off</i>ミュート</a>
 								</li>
-							<li class="tab col my-data-width">
+								<li class="anc-link only-my-data" go="#his-domain-list">
-								<a go="#his-follower-list" title="フォロワー"><i
+									<a href="#" title="ドメインブロック"><i
-										class="material-icons">people</i>←</a>
+											class="material-icons">language</i>ドメインブロック</a>
 								</li>
-							<li class="tab col my-data-width only-his-data">
+								<li class="anc-link only-my-data" go="#his-prof-list">
-								<a go="#his-action" title="他のアカウントで操作"><i
+									<a href="#" title="プロフィール編集"><i
-										class="material-icons">account_box</i></a>
+											class="material-icons">create</i>プロフィール編集</a>
 								</li>
-							<li class="tab col my-data-width only-his-data">
+								<li class="anc-link only-my-data" go="#his-request-list">
-								<a go="#his-list" title="リスト"><i class="material-icons">list</i></a>
+									<a href="#" title="フォローリクエスト"><i
+											class="material-icons">how_to_reg</i>フォローリクエスト</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link only-my-data" go="#his-follow-recom-list">
-								<a go="#his-fav-list" title="お気に入り登録"><i class="material-icons">star</i></a>
+									<a href="#" title="おすすめ"><i class="material-icons">recent_actors</i>おすすめ</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link only-his-data" go="#his-action">
-								<a go="#his-blocking-list" title="ブロック"><i class="material-icons">block</i></a>
+									<a href="#" title="他のアカウントで操作"><i
+											class="material-icons">account_box</i>他のアカウントで操作</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="only-his-data">
-								<a go="#his-muting-list" title="ミュート"><i
+									<a href="#">Coming soon...</a>
-										class="material-icons">voice_over_off</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-domain-list" title="ドメインブロック"><i
-										class="material-icons">language</i><i class="material-icons">block</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-prof-list" title="プロフィール編集"><i class="material-icons">create</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-request-list" title="フォローリクエスト"><i
-										class="material-icons">how_to_reg</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-follow-recom-list" title="おすすめ"><i
-										class="material-icons">recent_actors</i></a>
 								</li>
 							</ul>
 						</div>
-					<div id="his-tl" class="tab-content">
+						<div id="his-tl" class="his-var-content">
 							<div id="his-tl-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="utl('--now','more')">もっと</button>
 						</div>
-					<div id="his-follow-list" class="tab-content">
+						<div id="his-follow-list" class="his-var-content">
 							<div id="his-follow-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="flw('--now','more')">もっと</button>
 						</div>
-					<div id="his-follower-list" class="tab-content">
+						<div id="his-follower-list" class="his-var-content">
 							<div id="his-follower-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="fer('--now','more')">もっと</button>
 						</div>
-					<div id="his-action" class="tab-content">
+						<div id="his-action" class="his-var-content">
 							他のアカウントを使用するフォロー((解除はできません。))<br>
 							<div style="max-width:500px;"><select id="user-acct-sel" class="acct-sel"></select></div>
 							で
@@ -537,30 +543,30 @@
 							<a href="#!" class="waves-effect btn"
 								onclick="udgEx('selector', 'selector')">プロフィールを表示</a><br>
 						</div>
-					<div id="his-list" class="tab-content">
+						<div id="his-list" class="his-var-content">
 							<div id="his-lists-a">リストに追加するためにはフォローが必要です。</div>
 
 							<div id="his-lists-b"></div>
 						</div>
-					<div id="his-fav-list" class="tab-content">
+						<div id="his-fav-list" class="his-var-content">
 							<div id="his-fav-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect" style="width:100%; padding:0;"
 								onclick="showFav('more')">もっと</button>
 						</div>
-					<div id="his-blocking-list" class="tab-content">
+						<div id="his-blocking-list" class="his-var-content">
 							<div id="his-blocking-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showBlo('more')">もっと</button>
 						</div>
-					<div id="his-muting-list" class="tab-content">
+						<div id="his-muting-list" class="his-var-content">
 							<div id="his-muting-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showMut('more')">もっと</button>
 						</div>
-					<div id="his-domain-list" class="tab-content">
+						<div id="his-domain-list" class="his-var-content">
 							<div id="his-domain-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
@@ -570,13 +576,14 @@
 							<button class="btn waves-effect" onclick="addDomainblock()">追加</button>
 							<br>
 						</div>
-					<div id="his-prof-list" class="tab-content">名前
+						<div id="his-prof-list" class="his-var-content">名前
 							<br>
 							<input type="text" placeholder="名前" id="his-name-val" style="max-width:250px;">
 							<br>自己紹介
 							<br>
 							<div class="input-field col s12">
-							<textarea placeholder="自己紹介" id="his-des-val" class="materialize-textarea"></textarea>
+								<textarea placeholder="自己紹介" id="his-des-val"
+									class="materialize-textarea"></textarea>
 								<label for="his-des-val">自己紹介</label>
 							</div>
 							<button class="btn waves-effect" style="width:100%; padding:0;"
@@ -590,13 +597,13 @@
 								<input type="file" onchange="imgChange(this,'header')">
 							</span>
 						</div>
-					<div id="his-request-list" class="tab-content">
+						<div id="his-request-list" class="his-var-content">
 							<div id="his-request-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showReq('more')">もっと</button>
 						</div>
-					<div id="his-follow-recom-list" class="tab-content">
+						<div id="his-follow-recom-list" class="his-var-content">
 							<div id="his-follow-recom-contents" class="cont-series">
 							</div>
 						</div>
@@ -606,6 +613,7 @@
 					</div>
 				</div>
 			</div>
+		</div>
 		<div class="modal-footer">
 			<button class="modal-action waves-effect waves-green btn-flat" id="his-history-btn"
 				onclick="historyShow()">一つ前のユーザーデータ</button>

app/view/make/index.sample.html

@@ -423,7 +423,9 @@
 	<div id="his-data" class="modal bottom-sheet modal-fixed-footer" style="max-height:750px; height:90%;">
 		<div id="his-data-content" class="modal-content" style="padding-bottom: 0;overflow-y:hidden;">
 			<div id="his-data-show">
+				<div id="his-data-wrap">
 					<div class="his-float" id="his-float-data">
+						<div id="his-leftside">
 							<div id="his-basic-prof">
 								<img src="../../img/loading.svg" id="his-prof" draggable="false">
 								<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
@@ -454,81 +456,85 @@
 								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-openin"
 									onclick="profbrws()">@@openinbrowser@@</a>
 								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-my-data"
-							id="his-main-acct" onclick="setMain()" style="width: calc(100% - 10px)">@@mainacct@@</a><br>
+									id="his-main-acct" onclick="setMain()"
+									style="width: calc(100% - 10px)">@@mainacct@@</a><br>
 							</div><br>
 							<div id="his-matching-list">
 								@@likeUserDes@@<br>
-						Powered by <a href="https://vinayaka.distsn.org/" target="_blank">Mastodon User Matching</a><br>
+								Powered by <a href="https://vinayaka.distsn.org/" target="_blank">Mastodon User
+									Matching</a><br>
 								<div id="his-matching-list-contents" class="cont-series"></div>
-						<button class="btn waves-effect " onclick="showMat()" style="width:100%;">@@get@@</button>
+								<button class="btn waves-effect " onclick="showMat()"
+									style="width:100%;">@@get@@</button>
+							</div>
 						</div>
 					</div>
 					<div class="his-float" id="his-float-timeline">
 						<div id="my-data-nav">
-						<ul class="tabs transparent">
+							<a go="#his-tl" title="@@timeline@@" class="btn active-back column-first anc-link"><i
-							<li class="tab col my-data-width active-back column-first">
+									class="material-icons">timeline</i>@@timeline@@</a>
-								<a go="#his-tl" title="@@timeline@@"><i class="material-icons">timeline</i></a>
+							<a go="#his-follow-list" title="@@follow@@" class="btn anc-link"><i
+									class="material-icons">people</i>→@@follow@@</a>
+							<a go="#his-follower-list" title="@@follower@@" class="btn anc-link"><i
+									class="material-icons">people</i>←@@follower@@</a>
+							<a go="#his-list" title="@@list@@" class="btn only-his-data anc-link"><i
+									class="material-icons">list</i>@@list@@</a>
+							<a go="#his-fav-list" title="@@favRegist@@" class="btn only-my-data anc-link"><i
+									class="material-icons">star</i>@@favRegist@@</a>
+							<a class="dropdown-trigger btn" href="#" data-target="hisdropdown"><i
+									class="material-icons">more_vert</i>@@more@@</a>
+							<!-- Dropdown Structure -->
+							<ul id="hisdropdown" class="dropdown-content">
+								<li class="anc-link only-my-data" go="#his-blocking-list">
+									<a href="#" title="@@blocks@@"><i class="material-icons">block</i>@@blocks@@</a>
 								</li>
-							<li class="tab col my-data-width">
+								<li class="anc-link only-my-data" go="#his-muting-list">
-								<a go="#his-follow-list" title="@@follow@@"><i class="material-icons">people</i>→</a>
+									<a href="#" title="@@mute@@"><i
+											class="material-icons">voice_over_off</i>@@mute@@</a>
 								</li>
-							<li class="tab col my-data-width">
+								<li class="anc-link only-my-data" go="#his-domain-list">
-								<a go="#his-follower-list" title="@@follower@@"><i
+									<a href="#" title="@@domainBlock@@"><i
-										class="material-icons">people</i>←</a>
+											class="material-icons">language</i>@@domainBlock@@</a>
 								</li>
-							<li class="tab col my-data-width only-his-data">
+								<li class="anc-link only-my-data" go="#his-prof-list">
-								<a go="#his-action" title="@@operateOtherAcct@@"><i
+									<a href="#" title="@@editProf@@"><i
-										class="material-icons">account_box</i></a>
+											class="material-icons">create</i>@@editProf@@</a>
 								</li>
-							<li class="tab col my-data-width only-his-data">
+								<li class="anc-link only-my-data" go="#his-request-list">
-								<a go="#his-list" title="@@list@@"><i class="material-icons">list</i></a>
+									<a href="#" title="@@followReq@@"><i
+											class="material-icons">how_to_reg</i>@@followReq@@</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link only-my-data" go="#his-follow-recom-list">
-								<a go="#his-fav-list" title="@@favRegist@@"><i class="material-icons">star</i></a>
+									<a href="#" title="@@frc@@"><i class="material-icons">recent_actors</i>@@frc@@</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link only-his-data" go="#his-action">
-								<a go="#his-blocking-list" title="@@blocks@@"><i class="material-icons">block</i></a>
+									<a href="#" title="@@operateOtherAcct@@"><i
+											class="material-icons">account_box</i>@@operateOtherAcct@@</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="only-his-data">
-								<a go="#his-muting-list" title="@@mute@@"><i
+									<a href="#">Coming soon...</a>
-										class="material-icons">voice_over_off</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-domain-list" title="@@domainBlock@@"><i
-										class="material-icons">language</i><i class="material-icons">block</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-prof-list" title="@@editProf@@"><i class="material-icons">create</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-request-list" title="@@followReq@@"><i
-										class="material-icons">how_to_reg</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-follow-recom-list" title="@@frc@@"><i
-										class="material-icons">recent_actors</i></a>
 								</li>
 							</ul>
 						</div>
-					<div id="his-tl" class="tab-content">
+						<div id="his-tl" class="his-var-content">
 							<div id="his-tl-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="utl('--now','more')">@@more@@</button>
 						</div>
-					<div id="his-follow-list" class="tab-content">
+						<div id="his-follow-list" class="his-var-content">
 							<div id="his-follow-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="flw('--now','more')">@@more@@</button>
 						</div>
-					<div id="his-follower-list" class="tab-content">
+						<div id="his-follower-list" class="his-var-content">
 							<div id="his-follower-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="fer('--now','more')">@@more@@</button>
 						</div>
-					<div id="his-action" class="tab-content">
+						<div id="his-action" class="his-var-content">
 							@@useOtherAcct1@@@@revoverJP@@@@follow@@(@@warnUseOtherAcct@@)<br>
 							<div style="max-width:500px;"><select id="user-acct-sel" class="acct-sel"></select></div>
 							@@revoverJPde@@
@@ -537,30 +543,30 @@
 							<a href="#!" class="waves-effect btn"
 								onclick="udgEx('selector', 'selector')">@@openProf@@</a><br>
 						</div>
-					<div id="his-list" class="tab-content">
+						<div id="his-list" class="his-var-content">
 							<div id="his-lists-a">@@warnListRegist@@</div>
 
 							<div id="his-lists-b"></div>
 						</div>
-					<div id="his-fav-list" class="tab-content">
+						<div id="his-fav-list" class="his-var-content">
 							<div id="his-fav-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect" style="width:100%; padding:0;"
 								onclick="showFav('more')">@@more@@</button>
 						</div>
-					<div id="his-blocking-list" class="tab-content">
+						<div id="his-blocking-list" class="his-var-content">
 							<div id="his-blocking-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showBlo('more')">@@more@@</button>
 						</div>
-					<div id="his-muting-list" class="tab-content">
+						<div id="his-muting-list" class="his-var-content">
 							<div id="his-muting-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showMut('more')">@@more@@</button>
 						</div>
-					<div id="his-domain-list" class="tab-content">
+						<div id="his-domain-list" class="his-var-content">
 							<div id="his-domain-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
@@ -570,13 +576,14 @@
 							<button class="btn waves-effect" onclick="addDomainblock()">@@add@@</button>
 							<br>
 						</div>
-					<div id="his-prof-list" class="tab-content">@@name@@
+						<div id="his-prof-list" class="his-var-content">@@name@@
 							<br>
 							<input type="text" placeholder="@@name@@" id="his-name-val" style="max-width:250px;">
 							<br>@@note@@
 							<br>
 							<div class="input-field col s12">
-							<textarea placeholder="@@note@@" id="his-des-val" class="materialize-textarea"></textarea>
+								<textarea placeholder="@@note@@" id="his-des-val"
+									class="materialize-textarea"></textarea>
 								<label for="his-des-val">@@note@@</label>
 							</div>
 							<button class="btn waves-effect" style="width:100%; padding:0;"
@@ -590,13 +597,13 @@
 								<input type="file" onchange="imgChange(this,'header')">
 							</span>
 						</div>
-					<div id="his-request-list" class="tab-content">
+						<div id="his-request-list" class="his-var-content">
 							<div id="his-request-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showReq('more')">@@more@@</button>
 						</div>
-					<div id="his-follow-recom-list" class="tab-content">
+						<div id="his-follow-recom-list" class="his-var-content">
 							<div id="his-follow-recom-contents" class="cont-series">
 							</div>
 						</div>
@@ -606,6 +613,7 @@
 					</div>
 				</div>
 			</div>
+		</div>
 		<div class="modal-footer">
 			<button class="modal-action waves-effect waves-green btn-flat" id="his-history-btn"
 				onclick="historyShow()">@@historyBack@@</button>

app/view/make/language/ja/index.json

@@ -64,7 +64,7 @@
     "useOtherAcct2":"の解除はできません",
     "reply":"返信",
     "bt":"ブースト",
-    "favRegist":"お気に入り登録",
+    "favRegist":"お気に入り",
     "openBrowser":"ブラウザで開く",
     "screenshot":"スクリーンショット",
     "copyURL":"URLをコピー",

app/view/ps/index.html

@@ -423,7 +423,9 @@
 	<div id="his-data" class="modal bottom-sheet modal-fixed-footer" style="max-height:750px; height:90%;">
 		<div id="his-data-content" class="modal-content" style="padding-bottom: 0;overflow-y:hidden;">
 			<div id="his-data-show">
+				<div id="his-data-wrap">
 					<div class="his-float" id="his-float-data">
+						<div id="his-leftside">
 							<div id="his-basic-prof">
 								<img src="../../img/loading.svg" id="his-prof" draggable="false">
 								<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
@@ -454,81 +456,85 @@
 								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat" id="his-openin"
 									onclick="profbrws()">crwdns455:0crwdne455:0</a>
 								<a href="#!" class="btn waves-effect waves-effect blue-grey btn-flat only-my-data"
-							id="his-main-acct" onclick="setMain()" style="width: calc(100% - 10px)">@@mainacct@@</a><br>
+									id="his-main-acct" onclick="setMain()"
+									style="width: calc(100% - 10px)">@@mainacct@@</a><br>
 							</div><br>
 							<div id="his-matching-list">
 								crwdns469:0crwdne469:0<br>
-						Powered by <a href="https://vinayaka.distsn.org/" target="_blank">Mastodon User Matching</a><br>
+								Powered by <a href="https://vinayaka.distsn.org/" target="_blank">Mastodon User
+									Matching</a><br>
 								<div id="his-matching-list-contents" class="cont-series"></div>
-						<button class="btn waves-effect " onclick="showMat()" style="width:100%;">crwdns470:0crwdne470:0</button>
+								<button class="btn waves-effect " onclick="showMat()"
+									style="width:100%;">crwdns470:0crwdne470:0</button>
+							</div>
 						</div>
 					</div>
 					<div class="his-float" id="his-float-timeline">
 						<div id="my-data-nav">
-						<ul class="tabs transparent">
+							<a go="#his-tl" title="crwdns442:0crwdne442:0" class="btn active-back column-first anc-link"><i
-							<li class="tab col my-data-width active-back column-first">
+									class="material-icons">timeline</i>crwdns442:0crwdne442:0</a>
-								<a go="#his-tl" title="crwdns442:0crwdne442:0"><i class="material-icons">timeline</i></a>
+							<a go="#his-follow-list" title="crwdns440:0crwdne440:0" class="btn anc-link"><i
+									class="material-icons">people</i>→crwdns440:0crwdne440:0</a>
+							<a go="#his-follower-list" title="crwdns441:0crwdne441:0" class="btn anc-link"><i
+									class="material-icons">people</i>←crwdns441:0crwdne441:0</a>
+							<a go="#his-list" title="crwdns444:0crwdne444:0" class="btn only-his-data anc-link"><i
+									class="material-icons">list</i>crwdns444:0crwdne444:0</a>
+							<a go="#his-fav-list" title="crwdns434:0crwdne434:0" class="btn only-my-data anc-link"><i
+									class="material-icons">star</i>crwdns434:0crwdne434:0</a>
+							<a class="dropdown-trigger btn" href="#" data-target="hisdropdown"><i
+									class="material-icons">more_vert</i>crwdns457:0crwdne457:0</a>
+							<!-- Dropdown Structure -->
+							<ul id="hisdropdown" class="dropdown-content">
+								<li class="anc-link only-my-data" go="#his-blocking-list">
+									<a href="#" title="crwdns446:0crwdne446:0"><i class="material-icons">block</i>crwdns446:0crwdne446:0</a>
 								</li>
-							<li class="tab col my-data-width">
+								<li class="anc-link only-my-data" go="#his-muting-list">
-								<a go="#his-follow-list" title="crwdns440:0crwdne440:0"><i class="material-icons">people</i>→</a>
+									<a href="#" title="crwdns449:0crwdne449:0"><i
+											class="material-icons">voice_over_off</i>crwdns449:0crwdne449:0</a>
 								</li>
-							<li class="tab col my-data-width">
+								<li class="anc-link only-my-data" go="#his-domain-list">
-								<a go="#his-follower-list" title="crwdns441:0crwdne441:0"><i
+									<a href="#" title="crwdns450:0crwdne450:0"><i
-										class="material-icons">people</i>←</a>
+											class="material-icons">language</i>crwdns450:0crwdne450:0</a>
 								</li>
-							<li class="tab col my-data-width only-his-data">
+								<li class="anc-link only-my-data" go="#his-prof-list">
-								<a go="#his-action" title="crwdns443:0crwdne443:0"><i
+									<a href="#" title="crwdns451:0crwdne451:0"><i
-										class="material-icons">account_box</i></a>
+											class="material-icons">create</i>crwdns451:0crwdne451:0</a>
 								</li>
-							<li class="tab col my-data-width only-his-data">
+								<li class="anc-link only-my-data" go="#his-request-list">
-								<a go="#his-list" title="crwdns444:0crwdne444:0"><i class="material-icons">list</i></a>
+									<a href="#" title="crwdns452:0crwdne452:0"><i
+											class="material-icons">how_to_reg</i>crwdns452:0crwdne452:0</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link only-my-data" go="#his-follow-recom-list">
-								<a go="#his-fav-list" title="crwdns434:0crwdne434:0"><i class="material-icons">star</i></a>
+									<a href="#" title="crwdns456:0crwdne456:0"><i class="material-icons">recent_actors</i>crwdns456:0crwdne456:0</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="anc-link only-his-data" go="#his-action">
-								<a go="#his-blocking-list" title="crwdns446:0crwdne446:0"><i class="material-icons">block</i></a>
+									<a href="#" title="crwdns443:0crwdne443:0"><i
+											class="material-icons">account_box</i>crwdns443:0crwdne443:0</a>
 								</li>
-							<li class="tab col my-data-width only-my-data">
+								<li class="only-his-data">
-								<a go="#his-muting-list" title="crwdns449:0crwdne449:0"><i
+									<a href="#">Coming soon...</a>
-										class="material-icons">voice_over_off</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-domain-list" title="crwdns450:0crwdne450:0"><i
-										class="material-icons">language</i><i class="material-icons">block</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-prof-list" title="crwdns451:0crwdne451:0"><i class="material-icons">create</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-request-list" title="crwdns452:0crwdne452:0"><i
-										class="material-icons">how_to_reg</i></a>
-							</li>
-							<li class="tab col my-data-width only-my-data">
-								<a go="#his-follow-recom-list" title="crwdns456:0crwdne456:0"><i
-										class="material-icons">recent_actors</i></a>
 								</li>
 							</ul>
 						</div>
-					<div id="his-tl" class="tab-content">
+						<div id="his-tl" class="his-var-content">
 							<div id="his-tl-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="utl('--now','more')">crwdns457:0crwdne457:0</button>
 						</div>
-					<div id="his-follow-list" class="tab-content">
+						<div id="his-follow-list" class="his-var-content">
 							<div id="his-follow-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="flw('--now','more')">crwdns457:0crwdne457:0</button>
 						</div>
-					<div id="his-follower-list" class="tab-content">
+						<div id="his-follower-list" class="his-var-content">
 							<div id="his-follower-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="fer('--now','more')">crwdns457:0crwdne457:0</button>
 						</div>
-					<div id="his-action" class="tab-content">
+						<div id="his-action" class="his-var-content">
 							crwdns430:0crwdne430:0crwdns458:0crwdne458:0crwdns440:0crwdne440:0(crwdns459:0crwdne459:0)<br>
 							<div style="max-width:500px;"><select id="user-acct-sel" class="acct-sel"></select></div>
 							crwdns460:0crwdne460:0
@@ -537,30 +543,30 @@
 							<a href="#!" class="waves-effect btn"
 								onclick="udgEx('selector', 'selector')">crwdns462:0crwdne462:0</a><br>
 						</div>
-					<div id="his-list" class="tab-content">
+						<div id="his-list" class="his-var-content">
 							<div id="his-lists-a">crwdns463:0crwdne463:0</div>
 
 							<div id="his-lists-b"></div>
 						</div>
-					<div id="his-fav-list" class="tab-content">
+						<div id="his-fav-list" class="his-var-content">
 							<div id="his-fav-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect" style="width:100%; padding:0;"
 								onclick="showFav('more')">crwdns457:0crwdne457:0</button>
 						</div>
-					<div id="his-blocking-list" class="tab-content">
+						<div id="his-blocking-list" class="his-var-content">
 							<div id="his-blocking-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showBlo('more')">crwdns457:0crwdne457:0</button>
 						</div>
-					<div id="his-muting-list" class="tab-content">
+						<div id="his-muting-list" class="his-var-content">
 							<div id="his-muting-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showMut('more')">crwdns457:0crwdne457:0</button>
 						</div>
-					<div id="his-domain-list" class="tab-content">
+						<div id="his-domain-list" class="his-var-content">
 							<div id="his-domain-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
@@ -570,13 +576,14 @@
 							<button class="btn waves-effect" onclick="addDomainblock()">crwdns491:0crwdne491:0</button>
 							<br>
 						</div>
-					<div id="his-prof-list" class="tab-content">crwdns465:0crwdne465:0
+						<div id="his-prof-list" class="his-var-content">crwdns465:0crwdne465:0
 							<br>
 							<input type="text" placeholder="crwdns465:0crwdne465:0" id="his-name-val" style="max-width:250px;">
 							<br>crwdns466:0crwdne466:0
 							<br>
 							<div class="input-field col s12">
-							<textarea placeholder="crwdns466:0crwdne466:0" id="his-des-val" class="materialize-textarea"></textarea>
+								<textarea placeholder="crwdns466:0crwdne466:0" id="his-des-val"
+									class="materialize-textarea"></textarea>
 								<label for="his-des-val">crwdns466:0crwdne466:0</label>
 							</div>
 							<button class="btn waves-effect" style="width:100%; padding:0;"
@@ -590,13 +597,13 @@
 								<input type="file" onchange="imgChange(this,'header')">
 							</span>
 						</div>
-					<div id="his-request-list" class="tab-content">
+						<div id="his-request-list" class="his-var-content">
 							<div id="his-request-list-contents" class="cont-series">
 							</div>
 							<button class="btn waves-effect " style="width:100%; padding:0;"
 								onclick="showReq('more')">crwdns457:0crwdne457:0</button>
 						</div>
-					<div id="his-follow-recom-list" class="tab-content">
+						<div id="his-follow-recom-list" class="his-var-content">
 							<div id="his-follow-recom-contents" class="cont-series">
 							</div>
 						</div>
@@ -606,6 +613,7 @@
 					</div>
 				</div>
 			</div>
+		</div>
 		<div class="modal-footer">
 			<button class="modal-action waves-effect waves-green btn-flat" id="his-history-btn"
 				onclick="historyShow()">crwdns471:0crwdne471:0</button>