Restyle the configuration page for mobile devices

For task: Integrate Bluetooth Joystick to mobile VR set #86
ros-ukraine · Mar 29, 2019 · d6395f6 · d6395f6
1 parent 111b7e8
commit d6395f6
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 8 deletions.
diff --git a/leobot_web_server/web_content/config.html b/leobot_web_server/web_content/config.html
@@ -34,8 +34,8 @@ <h5 class="select-heading">Select a joystick to configure or press any joystick
         </tab-content>
 
         <tab-content title="Configure" icon="ti-settings" :before-change="askNextButton">
-            <h5>Action: {{buttonRole}}</h5>
-            <p>Press the joystick button/axis to the maximum and hit Next</p>
+            <h5 class="action-name">Action: {{buttonRole}}</h5>
+            <p class="press-hint">Press the joystick button/axis to the maximum and hit Next</p>
             <div id="actuometer">
               <div class="actuometer momentary">
                 <div class="overlap"></div>
@@ -44,14 +44,14 @@ <h5>Action: {{buttonRole}}</h5>
                 <div class="overlap"></div>
               </div>
             </div>
-            <p>
+            <p class="configured-value">
               Configured value: {{configuredString}}
               <button id="reset" type="button" class="btn btn-outline-secondary btn-primary btn-sm">Reset</button>
             </p>
         </tab-content>
 
         <tab-content title="Check" icon="ti-check">
-          <table id="config-table" class="table">
+          <table id="config-table" class="table config-results">
             <thead>
               <tr>
                 <th>Button Role</th>
@@ -66,7 +66,7 @@ <h5>Action: {{buttonRole}}</h5>
               </tr>
             </tbody>
           </table>
-          <p>Press Next to save the configuration</p>
+          <p class="press-next">Press Next to save the configuration</p>
         </tab-content>
 
         <tab-content title="Finish" icon="ti-check">

diff --git a/leobot_web_server/web_content/css/config.css b/leobot_web_server/web_content/css/config.css
@@ -1,3 +1,10 @@
+/* Generic rule */
+.wizard-tab-content p {
+  font-size: 4vw;
+  margin-bottom: 4%;
+}
+
+/* Specific rules */
 .vue-form-wizard .wizard-title {
   font-size: 5vw;
   margin-top: 3%;
@@ -34,7 +41,6 @@
 
 .thumbstick-hint {
   display: flex;
-  margin-bottom: 5vw;
 }
 
 .exclamation-triangle {
@@ -51,22 +57,35 @@
   margin-bottom: -29%;
 }
 
-.thumbstick-hint-content {
+.wizard-tab-content .thumbstick-hint .thumbstick-hint-content {
   margin: auto 0;
   font-size: 3vw;
 }
 
-.thumbstick-hint-content p {
+.wizard-tab-content .thumbstick-hint .thumbstick-hint-content p {
+  font-size: inherit;
   margin-bottom: 0;
 }
 
+.wizard-card-footer {
+  margin-top: 1%;
+}
+
 .vue-form-wizard .wizard-btn {
   width: 30vw;
   height: 10vw;
   font-size: 5vw;
   border-radius: 1vw;
 }
 
+.action-name {
+  font-size: 5vw;
+}
+
+.press-hint {
+  font-size: 3.8vw;
+}
+
 .actuometer {
   height: 10vw;
   margin: 1% 0;
@@ -81,4 +100,11 @@
 
 #reset {
   float: right;
+  font-size: 4vw;
+  padding: 1vw 3vw;
+  border-radius: 1vw;
+}
+
+.config-results {
+  font-size: 3vw;
 }