Merge pull request #623 from superhakar/dev

Fixes #604(Responsiveness of stopwatch activity)
llaske · Feb 27, 2020 · c984e40 · c984e40
2 parents e78f5ba + 3559b14
commit c984e40
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 36 deletions.
diff --git a/activities/Stopwatch.activity/css/activity.css b/activities/Stopwatch.activity/css/activity.css
@@ -26,6 +26,50 @@ ul {
   margin: 0;
 }
 
+.card {
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border: 1px solid rgba(0, 0, 0, 0.125);
+  border-radius: 0.25rem;
+}
+
+.card-body {
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  padding: 1.25rem;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -15px;
+  margin-left: -15px;
+}
+
+.d-flex{
+  display: flex !important;
+  padding: 0 15px;
+}
+
+.justify-content-center{
+  justify-content: center !important;
+}
+
+.align-items-center{
+  align-items: center !important;
+}
+
+div.p-0{
+  padding: 0;
+}
+
 #stopwatch-app {
   text-align: center;
   margin: 0 55px;
@@ -39,34 +83,22 @@ ul {
 
 #stopwatch-list li {
   position: relative;
-  padding-bottom: 128px;
   border-bottom: 1px solid black;
 }
 
 #stopwatch-list li p {
   line-height: 1.2;
 }
 
-.counter, .marks {
-  display: inline-block;
-  transform: translateY(35%);
-}
-
 .marks {
-  font-size: 30px;
+  font-size: 28px;
 }
 
 .counter {
-  margin-left: 22px;
   font-weight: bold;
   font-size: 30px;
 }
 
-.buttons-group {
-  display: inline-block;
-  transform: translateY(15%);
-}
-
 .buttons-group button {
   border-radius: 0;
   margin-left: 0;
@@ -84,13 +116,9 @@ ul {
 }
 
 button.remove {
-  position: absolute;
-  top: 10%;
-  right: 0;
-  width: 84px;
-  height: 84px;
+  width: 44px;
+  height: 44px;
   background-color: transparent;
-  background-position: center;
   background-size: 44px 44px;
   background-repeat: no-repeat;
   background-image: url(../icons/list-remove.svg);
@@ -145,3 +173,52 @@ button.remove {
 .buttons-group button.clear-marks-button {
   background-image: url(../icons/edit-clear.svg);
 }
+
+/* Below code is used to make responsive changes */
+
+@media only screen and (max-width: 1130px) and (min-width: 767px){
+  .marks{
+    font-size: 26px;
+  }
+}
+
+@media only screen and (max-width: 1060px) and (min-width: 767px){
+  .marks{
+    font-size: 24px;
+  }
+}
+
+@media only screen and (max-width: 1024px) and (min-width: 767px){
+  .buttons-group button {
+    height: 42px;
+    width: 42px;
+    background-size: 32px 32px;
+  }
+  .counter, .marks {
+    font-size: 22px;
+  }
+}
+
+@media only screen and (max-width: 767px){
+  .d-flex{
+    width: 100%;
+  }
+}
+
+@media only screen and (max-width: 484px){
+  button.remove {
+    margin-right: 0;
+  }
+  .buttons-group button {
+    height: 42px;
+    width: 42px;
+    background-size: 32px 32px;
+  }
+  .counter, .marks {
+    font-size: 22px;
+  }
+  #stopwatch-app {
+    margin: 0 10px;
+  }
+}
+
diff --git a/activities/Stopwatch.activity/index.html b/activities/Stopwatch.activity/index.html
@@ -22,8 +22,8 @@
     </div>
     <div id="canvas">
       <div id="stopwatch-app">
-        <ul style="list-style-type:none;" class="panel" id="stopwatch-list"></ul>
-        <button id="add-stopwatch" title="Add Stopwatch"></button>
+        <ul style="list-style-type:none;" class="card" id="stopwatch-list"></ul>
+        <button id="add-stopwatch" title="Add Stopwatch"></></button>
       </div>
     </div>
     <button class = "toolbutton pull-right" id = "unfullscreen-button" title = "Unfullscreen"></button>

diff --git a/activities/Stopwatch.activity/js/activity.js b/activities/Stopwatch.activity/js/activity.js
@@ -30,23 +30,24 @@ define(["sugar-web/activity/activity","mustache", "sugar-web/env"], function (ac
             stopwatchList.appendChild(this.elem);
 
             this.template =
-                '<div class="panel-body"></div>' +
+                '<div class="card-body">' +
                     '<div class="row">' +
-                      '<div class="col-xs-3 col-sm-3 col-md-2 col-lg-2">' +
-                        '<div class="counter">00:00:00</div>' +
-                      '</div>' +
-                      '<div class="col-xs-5 col-sm-5 col-md-4 col-lg-3">' +
-                        '<div class="buttons-group">' +
-                            '<button class="start-stop-button start" title="Start"></button>' +
-                            '<button class="reset-button" title="Reset"></button>' +
-                            '<button class="mark-button" title="Mark"></button>' +
-
+                        '<div class="col-sm-2 col-md-2 col-lg-2 d-flex justify-content-center align-items-center">' +
+                            '<div class="counter">00:00:00</div>' +
+                        '</div>' +
+                        '<div class="col-sm-4 col-md-4 col-lg-4 d-flex justify-content-center align-items-center">' +
+                            '<div class="buttons-group">' +
+                                '<button class="start-stop-button start" title="Start"></button>' +
+                                '<button class="reset-button" title="Reset"></button>' +
+                                '<button class="mark-button" title="Mark"></button>' +
+                            '</div>' +
+                        '</div>' +
+                        '<div class="col-sm-5 col-md-5 col-lg-5 d-flex align-items-center justify-content-center">' +
+                            '<div class="marks"></div>' +
+                        '</div>' +
+                        '<div class="col-sm-1 col-md-1 col-lg-1 d-flex justify-content-center align-items-center p-0">' +
+                            '<button class ="remove" title="Remove"></button>' +
                         '</div>' +
-                      '</div>' +
-                      '<div class="col-xs-4 col-sm-4 col-md-6 col-lg-7">' +
-                        '<div class="marks"></div>' +
-                        '<button class="remove" title="Remove"></button>' +
-                      '</div>' +
                     '</div>' +
                 '</div>';