more work on responsive aside

6 files changed, 31 insertions, 34 deletions

diff --git a/view/css/widgets.css b/view/css/widgets.css
index b78725919..df77940dd 100644
--- a/view/css/widgets.css
+++ b/view/css/widgets.css
@@ -243,9 +243,9 @@ a.wikilist {
 
 /* contact block */
 .contact-block-div .oneway-overlay {
-	font-size: 20px;
-	margin-left: -25px;
-	margin-top: 25px;
+	font-size: .9rem;
+	margin-left: -1.2rem;
+	margin-top: 2rem;
 	opacity: 0.8;
 }
 
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index a4641b68e..aad17698b 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -24,15 +24,15 @@ body {
 
 aside#region_1 {
 	border-right: 1px solid transparent;
-	width: $left_aside_widthpx;
-	min-width: $left_aside_widthpx;
-	max-width: $left_aside_widthpx;
+	width: $left_aside_widthrem;
+	min-width: $left_aside_widthrem;
+	max-width: $left_aside_widthrem;
 }
 
 aside#region_3 {
-	width: $right_aside_widthpx;
-	min-width: $left_aside_widthpx;
-	max-width: $right_aside_widthpx;
+	width: $right_aside_widthrem;
+	min-width: $left_aside_widthrem;
+	max-width: $right_aside_widthrem;
 }
 
 aside#left_aside_wrapper,
@@ -49,7 +49,7 @@ main {
 #overlay {
 	position: fixed;
 	top: 0;
-	left: $left_aside_widthpx;
+	left: $left_aside_widthrem;
 	width: 100vw;
 	height: 100vh;
 	background: rgba(0, 0, 0, .3);
@@ -401,16 +401,10 @@ footer {
 }
 
 .vcard-card {
-	border-bottom-left-radius: 0;
-	border-bottom-right-radius: 0;
+	background-color: rgba(254,254,254,0.5);
 }
 
 .vcard {
-	margin-bottom: 10px;
-	padding: 0px 10px 10px 10px;
-	background-color: rgba(254,254,254,0.5);
-	border: 1px solid rgba(254,254,254,0.5);
-	border-top: 0px;
 	word-wrap: break-word;
 }
 
@@ -563,8 +557,8 @@ footer {
 }
 
 .contact-block-img {
-	width:47px;
-	height:47px;
+	width: 2.95rem;
+	height: 2.95rem;
 	margin-bottom: 3px;
 }
 
@@ -1183,7 +1177,6 @@ img.mail-conv-sender-photo {
 
 .widget {
 	background-color: rgba(254,254,254,.5);
-	border: 1px solid rgba(254,254,254,.5);
 	border-radius: $radius;
 }
 
@@ -1522,8 +1515,8 @@ blockquote {
 	}
 
 	main {
-		left: -$left_aside_widthpx;
-		width: calc( 100% + $left_aside_widthpx );
+		left: -$left_aside_widthrem;
+		width: calc( 100% + $left_aside_widthrem );
 	}
 
 	main.region_1-on {
diff --git a/view/theme/redbasic/php/style.php b/view/theme/redbasic/php/style.php
index 3ea94f9aa..6ba0d569e 100644
--- a/view/theme/redbasic/php/style.php
+++ b/view/theme/redbasic/php/style.php
@@ -101,7 +101,7 @@ if (! $radius)
 if (! $shadow)
 	$shadow = '0';
 if (! $converse_width)
-	$converse_width = '790';
+	$converse_width = '1250'; //unit: rem
 if(! $top_photo)
 	$top_photo = '2.3rem';
 if(! $reply_photo)
@@ -120,8 +120,8 @@ if(file_exists('view/theme/redbasic/css/style.css')) {
 		$x .= $schemecss;
 	}
 
-	$left_aside_width = 288;
-	$right_aside_width = 288;
+	$left_aside_width = 21; //unit: rem
+	$right_aside_width = 21; //unit: rem
 
 	$main_width = $left_aside_width + $right_aside_width + intval($converse_width);
 
diff --git a/view/tpl/connstatus.tpl b/view/tpl/connstatus.tpl
index 667775f3a..869345682 100644
--- a/view/tpl/connstatus.tpl
+++ b/view/tpl/connstatus.tpl
@@ -1 +1 @@
-<i class="fa fa-fw fa-comments oneway-overlay text-{{if $perminfo.connpermcount == 3}}success{{elseif $perminfo.connpermcount > 0}}warning{{else}}danger{{/if}}" title="{{$perminfo.connperms}}"></i>
+<i class="fa fa-comments oneway-overlay text-{{if $perminfo.connpermcount == 3}}success{{elseif $perminfo.connpermcount > 0}}warning{{else}}danger{{/if}}" title="{{$perminfo.connperms}}"></i>
diff --git a/view/tpl/profile_vcard.tpl b/view/tpl/profile_vcard.tpl
index 983c79fab..487fa3959 100644
--- a/view/tpl/profile_vcard.tpl
+++ b/view/tpl/profile_vcard.tpl
@@ -1,11 +1,13 @@
 {{if !$zcard}}
-<div class="card h-card vcard-card">
+
+<div  class="rounded mb-3 vcard-card h-card">
+<div  class="card">
 	<div class="row">
-		<div class="col-4">
+		<div class="col-4" style="width: 7rem;">
 			{{if $editmenu}}
 			<a href="profile_photo" title="{{$change_photo}}">
 			{{/if}}
-				<img class="u-photo" src="{{$profile.photo}}?rev={{$profile.picdate}}" alt="{{$profile.fullname}}" width="80px" height="80px">
+				<img class="rounded-start u-photo" src="{{$profile.photo}}?rev={{$profile.picdate}}" alt="{{$profile.fullname}}" style="width: 6rem; height:6rem;">
 			{{if $editmenu}}
 			{{/if}}
 			</a>
@@ -44,9 +46,9 @@
 		</div>
 	</div>
 </div>
-<div class="vcard h-card rounded-bottom">
+<div class="vcard ps-2 pe-2">
 	{{if $profile.pdesc}}
-	<div class="pt-2 pb-3">{{$profile.pdesc}}</div>
+	<div class="pb-3 pt-2">{{$profile.pdesc}}</div>
 	{{/if}}
 	{{if $location}}
 	<dl class="">
@@ -77,7 +79,7 @@
 	</dl>
 	{{/if}}
 	{{if $homepage}}
-	<dl class="">
+	<dl class="pb-2">
 		<dt class="homepage-label">{{$homepage}}</dt>
 		<dd class="homepage-url u-url">{{$profile.homepage}}</dd>
 	</dl>
@@ -85,6 +87,8 @@
 
 	<div class="hcard-addon"></div>
 </div>
+</div>
+
 {{/if}}
 
 {{if $zcard}}
diff --git a/view/tpl/xchan_vcard.tpl b/view/tpl/xchan_vcard.tpl
index 2b5a6cb41..a5568f283 100644
--- a/view/tpl/xchan_vcard.tpl
+++ b/view/tpl/xchan_vcard.tpl
@@ -1,8 +1,8 @@
 <div class="card mb-3 h-card">
 	<div class="row">
-		<div class="col-4">
+		<div class="col-4" style="width: 7rem;">
 			<a href="{{$link}}" >
-				<img class="u-photo rounded-start" src="{{$photo}}" alt="{{$name}}" width="80px" height="80px">
+				<img class="u-photo rounded-start" src="{{$photo}}" alt="{{$name}}" style="width: 6rem; height:6rem;">
 			</a>
 		</div>
 		<div class="col-7 m-1 p-0">