Nicer Roster Layout

EQdkpPlus · Nov 3, 2019 · da568cb · da568cb
1 parent 09033d7
commit da568cb
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 43 deletions.
diff --git a/roster/roster_additions.php b/roster/roster_additions.php
@@ -22,54 +22,63 @@
 	// Add css code:
 	$this->tpl->add_css("
 		#guild_header_wrap {
-			width:100%;
-margin-top: 20px;
+			display: flex;
+			-webkit-box-align: center;
+   			-ms-flex-align: center;
+    		align-items: center;
 		}
-		
-		#guild_emblem { 
-			height:120px;
-			margin:-20px 0 0 5px;
-			float:left;
+
+		#guild_data_wrapper {
+			padding: 0 20px;
+   			border-left: 1px solid rgba(0,0,0,.2);
+			align-self: stretch;
+    		overflow: hidden;
 		}
-		#guild_emblem img{
-			height:100px;
-		} 
-		#guild_header_banner_alliance{
-			width:100%;
-			height:106px;
-			background: url('".$this->server_path."games/wow/profiles/factions/banner_alliance.jpg') repeat-x scroll 0px 0px transparent;
-			margin-top:30px;
+
+		#guild_emblem, #guild_emblem img { 
+			height: 100px;
 		}
-		#guild_header_banner_horde{
-			width:100%;
-			height:106px;
-			background: url('".$this->server_path."games/wow/profiles/factions/banner_horde.jpg') repeat-x scroll 0px 0px transparent;
-			margin-top:30px;
+
+		#guild_name_wrapper {
+			padding: 0 20px;
 		}		
-		#guild_emblem { 
-			height:180px;
-			margin:-20px 0 0 5px;
-			float:left;
-		}
-		#guild_emblem img{
-			height:150px;
-		} 
-		
+
 		#guild_name {
-			font-size: 30px; 
-			position:relative; 
-			top:20px; 
-			left:15px;
+			font-size: 2em; 
 			font-weight:bold;
 		}
+
 		#guild_realm {
-			font-size: 20px; 
+			padding-top: 5px;
+			font-size: 1.2em; 
 			color: #FFCC33 ;
-			position:relative; 
-			top:50px; 
-			left:15px;
+		}
+
+		#guild_data_wrapper {
+			color: #FFCC33;
+			-webkit-box-orient: vertical;
+		    -webkit-box-direction: normal;
+		    -ms-flex-direction: column;
+		    flex-direction: column;
+		    -webkit-box-pack: center;
+		    -ms-flex-pack: center;
+		    justify-content: center;
+		    display: flex;
+		}
+
+		.guild_data_container svg {
+			width: 16px;height: 16px;fill: currentColor;
 		}
 		
+		.guild_data_container {
+			margin-right: 20px;
+			display: flex;
+		}
+
+		#guild_data_wrapper > div {
+			display: flex;
+		}
+
 		#bar_15088, #bar_15077, #bar_15078, #bar_15079, #bar_15080, #bar_15089, #bar_15093{
 			width: 31%;
 			float: left;

diff --git a/roster/roster_view.html b/roster/roster_view.html
@@ -1,11 +1,17 @@
 <div id="guild_header_wrap">	
-	<div id="">
-		<div id="guild_emblem">
+		<div id="guild_emblem" class="hiddenSmartphone">
 			<img src="{TABARD}" alt="Guildtabard" class="eqdkpicon" />
-		</div>	
-		<div id="guild_name">{GUILD}</div>
-		<div id="guild_realm">{REGION}-{REALM} &bull; {ACHIEV_POINTS} <i class="adminicon"></i> &bull; <i class="fa fa-users"></i> {MEMBER_COUNT}</div>
-	</div>
+		</div>
+		<div id="guild_name_wrapper">
+			<div id="guild_name">{GUILD}</div>
+			<div id="guild_realm">{REGION}-{REALM}</div>
+		</div>
+		<div id="guild_data_wrapper">
+			<div>
+				<span class="guild_data_container"><span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" class="injected-svg Icon-svg" data-src="/static/components/Icon/svg/shield.933e04dc2d00d7a10d060298d2299559.svg#shield" xmlns:xlink="http://www.w3.org/1999/xlink" data-queryselectoralways-ignore=""><path xmlns="http://www.w3.org/2000/svg" d="M31.725 61.416c-9.022 0-26.748-19.035-26.85-42.062a1.226 1.226 0 01.005-.276c0-.065.004-.128.012-.193.122-1.43.93-2.706 2.193-3.467.142-.106.301-.187.476-.24.067-.02 6.74-2.043 10.721-4.421 4.022-2.399 10.542-8.272 10.607-8.331.061-.056.128-.107.198-.152l.302-.18c.094-.057.192-.101.292-.135a4.3 4.3 0 01.803-.292c1.041-.259 1.544-.226 2.371-.033.043.01.115.032.177.052.25.066.499.159.752.278.091.033.18.073.267.123l.207.122-.004.006c.118.062.226.138.322.225.68.609 6.746 6.02 10.632 8.34 4.041 2.41 10.607 4.375 10.673 4.393.181.054.347.138.494.248 1.223.743 2.02 1.969 2.169 3.35.023.1.035.204.035.31.004.035 0 .132 0 .167l-.002.094c-.103 23.035-17.83 42.074-26.852 42.074z" id="shield-1"></path></svg></span> {ACHIEV_POINTS}</span>
+				<span class="guild_data_container"><i class="fa fa-lg fa-users"></i>&nbsp;{MEMBER_COUNT} {L_members}</span>
+			</div>
+		</div>
 </div>
 <br clear="left" />