Skip to content

Commit

Permalink
improved UI responsiveness for mobile devices
Browse files Browse the repository at this point in the history
  • Loading branch information
@albogdano
albogdano committed Jun 6, 2019
1 parent 2ade6f2 commit 9c6b330
Show file tree
Hide file tree
Showing 18 changed files with 189 additions and 109 deletions.
15 changes: 15 additions & 0 deletions src/main/resources/static/styles/rtl.css
View file
Expand Up @@ -93,6 +93,21 @@ td, th {
padding: 7px 7px 7px 2px;
}

.row .col.offset-s6 {
margin-right: 50%;
margin-left: 0;
}

.chips-container {
float: left;
}

@media (max-width: 990px) {
.chips-container {
float: none;
}
}

.r{ text-align: left;}
.l{ text-align: right;}
.right{ float: left !important; }
Expand Down
64 changes: 64 additions & 0 deletions src/main/resources/static/styles/style.css
View file
Expand Up @@ -199,6 +199,10 @@ kbd {
.chip:focus {
background-color: #666;
}
.chips-container {
padding-top: 18px;
float: right;
}
.material-icons {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
Expand Down Expand Up @@ -239,14 +243,74 @@ pre, code.hljs, code[class*="language-"], pre[class*="language-"] {
margin-right: 0;
text-transform: lowercase;
}
.editlink {
display: inline-flex;
}
.aboutme {
padding-left: 70px;
}
.post-actions a {
display: inline-block;
}
@media (max-width: 900px) {
.sTextCenter {
text-align: center;
}
.sTextCenter.r {
text-align: center;
}
.mediumText {
font-size: 1.1em;
}
.hugeText {
font-size: 2em;
}
.card-panel {
padding: 10px;
margin: 5px 0;
}
.container {
width: 96%;
}
.ptl {
padding-top: 10px;
}
mtl {
margin-top: 10px;
}
body {
font-size: 14px;
}
h1 {
font-size: 3.2rem;
margin: 1.68rem 0;
}
h2 {
font-size: 2.56rem;
margin: 1.3733333333rem 0 0.424rem 0;
}
#main-modal {
width: 100%;
}
.aboutme {
padding-left: 0px;
}
.user-card {
height: 90px;
margin-bottom: 10px;
}
.user-card img {
max-height: 90px;
}
}

@media (max-width: 990px) {
.chips-container {
padding: 0;
float: none;
}
}

.userbox img {max-width: inherit;}
@media (max-width: 1280px) {
.userbox img {max-width: 40px;}
Expand Down
2 changes: 1 addition & 1 deletion src/main/resources/templates/error.vm
View file
@@ -1,4 +1,4 @@
<div class="ptl">
<div class="page-wrapper">
<div class="container center pal">
<div class="mbl">
<a href="/"><img src="$!imageslink/logosq.png" width="220" height="220" alt="Error"></a>
Expand Down
35 changes: 20 additions & 15 deletions src/main/resources/templates/feedback.vm
View file
@@ -1,4 +1,4 @@
<div class="ptl">
<div class="page-wrapper">
#if ($write)
<h2><a href="$feedbacklink">$!lang.get("feedback.title")</a></h2>
<hr>
Expand Down Expand Up @@ -83,7 +83,7 @@
#end
</div>

<div class="col m12 l3">
<div class="col m12 l3 s12">
<div class="card-panel">
<div class="mediumText pvs"><b>$!utils.abbreviateInt($!showPost.viewcount, 0)</b> $!lang.get('posts.views')</div>
<div class="mediumText pvs"><b>$!showPost.answercount</b>
Expand Down Expand Up @@ -120,20 +120,25 @@
</div>
</div>
#else
#set($sortarr = {'votes': "", 'newest': "", 'updated': ""} )
#setsortbyselection($sortarr 'newest')
<div class="right mtl ptl">
<div class="mvm">
<a href="$feedbacklink" class="chip $sortarr.newest">$!lang.get("newest")</a>
<a href="$feedbacklink?sortby=votes" class="chip $sortarr.votes">$!lang.get("votes")</a>
<a href="$feedbacklink?sortby=updated" class="chip $sortarr.updated">$!lang.get("posts.updated")</a>
</div>
</div>
#if ($tag)
<h2>$!lang.get("feedback.tagged") '$!{tag}'</h2>
#else
<h2>$!lang.get("feedback.title") #showcount($itemcount.count)</h2>
#macro(feedbackTitle)
#if ($tag)
$!lang.get("feedback.tagged") '$!{tag}'
#else
$!lang.get("feedback.title") #showcount($itemcount.count)
#end
#end

<h4 class="hide-on-large-only">#feedbackTitle()</h4>

<div class="chips-container">
#set($sortarr = {'votes': "", 'newest': "", 'updated': ""} )
#setsortbyselection($sortarr 'newest')
<a href="$feedbacklink" class="chip $sortarr.newest">$!lang.get("newest")</a>
<a href="$feedbacklink?sortby=votes" class="chip $sortarr.votes">$!lang.get("votes")</a>
<a href="$feedbacklink?sortby=updated" class="chip $sortarr.updated">$!lang.get("posts.updated")</a>
</div>

<h2 class="hide-on-med-and-down">#feedbackTitle()</h2>
<hr>

#if($feedbacklist.isEmpty())
Expand Down
2 changes: 1 addition & 1 deletion src/main/resources/templates/languages.vm
View file
@@ -1,4 +1,4 @@
<div class="ptl">
<div class="page-wrapper">
<h2>$!lang.get("translate.select")</h2>
<hr>
<div class="row">
Expand Down
14 changes: 7 additions & 7 deletions src/main/resources/templates/macro.vm
View file
Expand Up @@ -273,7 +273,7 @@
#end
#if ($clazz.contains("notext")) #set($_showtxt = "" ) #else #set($_showtxt = " $!lang.get('report')") #end
<a href="#main-modal" title="Report a problem" data-fetch="$!{_href}" class="modal-trigger $!{clazz}">
#if(!$clazz.contains("noicon"))<span class="fa fa-flag"></span>#end $!_showtxt
#if(!$clazz.contains("noicon"))<i class="fa fa-flag"></i>#end $!_showtxt
</a>
#end
#end
Expand Down Expand Up @@ -361,10 +361,10 @@
</div>
</div>
<div class="row mbn">
<div class="col m10">
<div class="col m10 s12">
<div>#tagsbox($showpost.tags $actionlink2)</div>
</div>
<div class="col m2 mlm grey-text r">
<div class="col m2 s12 mlm grey-text r">
<i class="fa fa-clock-o"></i> #formatdate($showpost.timestamp "")
</div>
</div>
Expand Down Expand Up @@ -420,7 +420,7 @@
</div>

<div class="row">
<div class="col s12 m4 l4">
<div class="col s6 m4 l4">
<div class="left mtm mrl">
#set($approvedAnswer = $showpost.id.equals($parentpost.answerid))
#if ($approvedAnswer) #set($onclass = "green-text text-lighten-1") #else #set($onclass = "") #end
Expand All @@ -433,7 +433,7 @@
</div>
#votebox($showpost "hugeText mtm")
</div>
<div class="col s12 m3 l4">
<div class="col s6 m3 l4">
<div class="ptl center-align">
<div>$!lang.get("posts.posted") #formatdate($showpost.timestamp "")</div>
#if ($showpost.lasteditby)
Expand All @@ -443,7 +443,7 @@
#end
</div>
</div>
<div class="col s12 m5 l4">
<div class="col s6 m5 l4 offset-s6">
<div class="pam">
#smallpersonbox($showpost.author)
</div>
Expand All @@ -452,7 +452,7 @@

<div class="row">
<div class="col s12">
<div class="lightborder pam">
<div class="lightborder pam post-actions">
<a href="#post-$!showpost.id" title="Permalink" class="right permalink"><i class="fa fa-bookmark"></i></a>

#if ($scooldUtils.canEdit($showpost, $authUser))
Expand Down
2 changes: 1 addition & 1 deletion src/main/resources/templates/notfound.vm
View file
@@ -1,4 +1,4 @@
<div class="ptl">
<div class="page-wrapper">
<div class="container center pal">
<div class="mbl">
<a href="/"><img src="$!imageslink/logosq.png" width="220" height="220" alt="Error"></a>
Expand Down
27 changes: 14 additions & 13 deletions src/main/resources/templates/people.vm
View file
@@ -1,24 +1,25 @@
<div class="ptl">
<div class="page-wrapper">
#if($currentSpace && !$currentSpace.isEmpty())
<p class="mediumText grey-text">$scooldUtils.getSpaceName($!currentSpace)</p>
#end
<div class="right mtl ptl">

<h4 class="hide-on-large-only">$!lang.get("people.title") #showcount($itemcount.count)</h4>

<div class="chips-container">
#set($sortarr = {'votes': "", 'newest': ""} )
#setsortbyselection($sortarr 'newest')
<div class="mvm">
<a href="$peoplelink" class="chip $sortarr.newest">$!lang.get("newest")</a>
<a href="$peoplelink?sortby=votes" class="chip $sortarr.votes">$!lang.get("reputation")</a>
#if($isAdmin)
#if($request.getParameter("bulkedit"))
<a href="$peoplelink" class="chip grey darken-2 white-text">Bulk Edit Spaces</a>
#else
<a href="$peoplelink?bulkedit=true" class="chip">Bulk Edit Spaces</a>
#end
<a href="$peoplelink" class="chip $sortarr.newest">$!lang.get("newest")</a>
<a href="$peoplelink?sortby=votes" class="chip $sortarr.votes">$!lang.get("reputation")</a>
#if($isAdmin)
#if($request.getParameter("bulkedit"))
<a href="$peoplelink" class="chip grey darken-2 white-text">Bulk Edit Spaces</a>
#else
<a href="$peoplelink?bulkedit=true" class="chip">Bulk Edit Spaces</a>
#end
</div>
#end
</div>
<h2>$!lang.get("people.title") #showcount($itemcount.count)</h2>

<h2 class="hide-on-med-and-down">$!lang.get("people.title") #showcount($itemcount.count)</h2>

#if($isAdmin && $request.getParameter("bulkedit"))
<form method="get">
Expand Down
18 changes: 7 additions & 11 deletions src/main/resources/templates/profile.vm
View file
@@ -1,5 +1,5 @@
<div class="row ptl profilepage">
<div class="col m4">
<div class="col m4 s12">
<div class="card">
<div class="card-image">
<img src="#profilepic($showUser)" class="profile-pic">
Expand Down Expand Up @@ -103,22 +103,18 @@
#end
</div>

<div class="col m1"></div>
<div class="col m7">
<div>
<div class="row">
<div class="col m8">
<div class="col m8 s12">
<div class="aboutme">
<div class="row valign-wrapper">
<div class="col s8">
<h2>$!{lang.get("profile.about.title")}</h2>
</div>
<div class="col m4 r">&nbsp;
<div class="pvl">
&nbsp;
<div class="col s4 r">
#if ($canEdit)
<a href="$profilelink/$authUser.creatorid/edit" class="editlink btn">
<i class="fa fa-pencil"></i> $!{lang.get("edit")}
<i class="fa fa-pencil"></i><span class="plm">$!{lang.get("edit")}</span>
</a>
#end
</div>
</div>
</div>
#if ($request.requestURI.endsWith("/edit") && $authenticated)
Expand Down
4 changes: 2 additions & 2 deletions src/main/resources/templates/question.vm
View file
@@ -1,4 +1,4 @@
<div class="ptl">
<div class="page-wrapper">
<div class="row questionpage">
<div class="col m12 l9">
<span class="grey-text">
Expand Down Expand Up @@ -91,7 +91,7 @@
#end
</div>

<div class="col m12 l3">
<div class="col m12 l3 s12">
<div class="card-panel">
<div class="mediumText pvs"><b>$!utils.abbreviateInt($!showPost.viewcount, 0)</b> $!lang.get('posts.views')</div>
<div class="mediumText pvs"><b>$!showPost.answercount</b>
Expand Down

0 comments on commit 9c6b330

Please sign in to comment.