migration boostrap v4 to v5, fix paddings, margins, text display, position

Yeliazar · Yeliazar · commit 2a397fedfc8b · 2022-08-05T15:59:45.000+03:00
diff --git a/src/components/Notifications/NotificationsDemo/Messages.vue b/src/components/Notifications/NotificationsDemo/Messages.vue
@@ -5,7 +5,7 @@
         <img class="rounded-circle" src="../../../assets/people/a2.jpg" alt="people" />
         <i class="status status-bottom bg-success" />
       </span>
-      <time class="text-link help float-right">10 sec ago</time>
+      <time class="text-link help float-end">10 sec ago</time>
       <h6 class="m-0 fw-bold mb-1">Chris Gray</h6>
       <p class="deemphasize text-ellipsis m-0">Hey! What&apos;s up? So many times since we</p>
     </b-list-group-item>
@@ -14,7 +14,7 @@
         <img class="rounded-circle" src="../../../assets/people/a5.jpg" alt="people" />
         <i class="status status-bottom bg-success" />
       </span>
-      <time class="text-link help float-right">2 min ago</time>
+      <time class="text-link help float-end">2 min ago</time>
       <h6 class="m-0 mb-1">Jamey Brownlow</h6>
       <p class="deemphasize text-ellipsis m-0">
         Good news coming tonight. Seems they agreed to proceed
@@ -25,7 +25,7 @@
         <img class="rounded-circle" src="../../../assets/people/a1.jpg" alt="people" />
         <i class="status status-bottom bg-warning" />
       </span>
-      <time class="text-link help float-right">9 min ago</time>
+      <time class="text-link help float-end">9 min ago</time>
       <h6 class="m-0 mb-1">Livia Walsh</h6>
       <p class="deemphasize text-ellipsis m-0">Check out my latest email plz!</p>
     </b-list-group-item>
@@ -34,7 +34,7 @@
         <img class="rounded-circle" src="../../../assets/people/a6.jpg" alt="people" />
         <i class="status status-bottom bg-danger" />
       </span>
-      <time class="text-link help float-right">12:56 AM</time>
+      <time class="text-link help float-end">12:56 AM</time>
       <h6 class="m-0 mb-1">Jaron Fitzroy</h6>
       <p class="deemphasize text-ellipsis m-0">What about summer break?</p>
     </b-list-group-item>
@@ -43,7 +43,7 @@
         <img class="rounded-circle" src="../../../assets/people/a4.jpg" alt="people" />
         <i class="status status-bottom bg-gray-light" />
       </span>
-      <time class="text-link help float-right">Yesterday</time>
+      <time class="text-link help float-end">Yesterday</time>
       <h6 class="m-0 mb-1">Mike Lewis</h6>
       <p class="deemphasize text-ellipsis m-0">
         Just ain&apos;t sure about the weekend now. 90% I&apos;ll make it.
@@ -54,7 +54,7 @@
         <img class="rounded-circle" src="../../../assets/people/a6.jpg" alt="people" />
         <i class="status status-bottom bg-success" />
       </span>
-      <time class="text-link help float-right">Apr 23</time>
+      <time class="text-link help float-end">Apr 23</time>
       <h6 class="m-0 mb-1">Freda Edison</h6>
       <p class="deemphasize text-ellipsis m-0">
         Hey what&apos;s up? Me and Monica going for a lunch somewhere. Wanna join?
diff --git a/src/components/Notifications/NotificationsDemo/Progress.vue b/src/components/Notifications/NotificationsDemo/Progress.vue
@@ -1,7 +1,7 @@
 <template>
   <b-list-group class="listGroup thin-scroll">
     <b-list-group-item class="listGroupItem">
-      <span class="text-muted float-right">60%</span>
+      <span class="text-muted float-end">60%</span>
       <h6 class="m-0 mb-1 text-gray">
         <strong>Urgent:</strong>
         &nbsp;Rails 4.1.0 upgrade
@@ -10,7 +10,7 @@
       <span class="help-block">3 notes added by James 2h ago...</span>
     </b-list-group-item>
     <b-list-group-item class="listGroupItem">
-      <span class="text-muted float-right">83%</span>
+      <span class="text-muted float-end">83%</span>
       <h6 class="m-0 mb-1 text-gray">
         <strong>Primary:</strong>
         &nbsp;Sing Web App
@@ -19,7 +19,7 @@
       <span class="help-block">verifying stable probability status</span>
     </b-list-group-item>
     <b-list-group-item class="listGroupItem">
-      <span class="text-muted float-right">44%</span>
+      <span class="text-muted float-end">44%</span>
       <h6 class="m-0 mb-1">
         <span class="circle bg-gray-dark text-warning"
           v-b-tooltip.hover title="2 issues require your attention" placement="bottom">
@@ -32,15 +32,15 @@
       <span class="help-block">last update: 2h ago</span>
     </b-list-group-item>
     <b-list-group-item class="listGroupItem">
-      <span class="text-muted float-right">86%</span>
+      <span class="text-muted float-end">86%</span>
       <h6 class="m-0 mb-1 deemphasize text-gray">
         Complete project planning
       </h6>
       <b-progress class="progress-xs m-0" variant="danger" :value="86" :max="100"/>
       <span class="help-block">no, no way this is not working...</span>
     </b-list-group-item>
     <b-list-group-item class="listGroupItem">
-      <span class="text-muted float-right">100%</span>
+      <span class="text-muted float-end">100%</span>
       <h6 class="m-0 mb-1 deemphasize text-gray">
         <strong>Completed:</strong>
         &nbsp;Instruct newbies on coding standards
diff --git a/src/documentation/pages/Libs.vue b/src/documentation/pages/Libs.vue
@@ -27,10 +27,10 @@
         <h3>Font-awesome</h3>
         <p>The iconic SVG, font, and CSS toolkit</p>
         <h4>Examples</h4>
-        <i class="fa fa-arrow-left fa-2x mr"></i>
-        <i class="fa fa-github fa-2x mr"></i>
-        <i class="fa fa-bath fa-2x mr"></i>
-        <i class="fa fa-grav fa-2x mr"></i>
+        <i class="fa fa-arrow-left fa-2x me-1"></i>
+        <i class="fa fa-github fa-2x me-1"></i>
+        <i class="fa fa-bath fa-2x me-1"></i>
+        <i class="fa fa-grav fa-2x me-1"></i>
         <i class="fa fa-telegram fa-2x"></i>
         <vue-code-highlight>{{fontAwesomeCode}}</vue-code-highlight>
         <p class="lead">Want to see examples?
@@ -44,10 +44,10 @@
         <h3>Glyphicons-halflings</h3>
         <p>TIncludes over 250 glyphs in font format from the Glyphicon Halflings set</p>
         <h4>Examples</h4>
-        <i class="glyphicon glyphicon-asterisk mr"></i>
-        <i class="glyphicon glyphicon-heart mr"></i>
-        <i class="glyphicon glyphicon-home mr"></i>
-        <i class="glyphicon glyphicon-refresh mr"></i>
+        <i class="glyphicon glyphicon-asterisk me-1"></i>
+        <i class="glyphicon glyphicon-heart me-1"></i>
+        <i class="glyphicon glyphicon-home me-1"></i>
+        <i class="glyphicon glyphicon-refresh me-1"></i>
         <i class="glyphicon glyphicon-camera"></i>
         <vue-code-highlight>{{glyphiconCode}}</vue-code-highlight>
         <p class="lead">Want to see examples?
@@ -61,11 +61,11 @@
         <h3>Line-awesome</h3>
         <p>A single file that replaces Font Awesome with modern line icons.</p>
         <h4>Examples</h4>
-        <i class="la la-arrow-left la-2x mr"></i>
-        <i class="la la-github la-2x mr"></i>
-        <i class="la la-facebook la-2x mr"></i>
+        <i class="la la-arrow-left la-2x me-0"></i>
+        <i class="la la-github la-2x me-0"></i>
+        <i class="la la-facebook la-2x me-0"></i>
         <vue-code-highlight>{{lineAwesomeCode}}</vue-code-highlight>
-        <p className="lead">Want to see examples?
+        <p class="lead">Want to see examples?
           <router-link to="/app/ui/icons">Click</router-link>
         </p>
         <p>For more examples and documentation please refer to <a href="https://github.com/FortAwesome/Font-Awesome"
@@ -78,7 +78,7 @@
         <h4>Example</h4>
         <mavon-editor id="markdown-editor" language="en"/>
         <vue-code-highlight>&lt;mavon-editor id="markdown-editor" language="en" v-model="mdContent"/&gt;</vue-code-highlight>
-        <p className="lead">Want to see examples?
+        <p class="lead">Want to see examples?
           <router-link to="/app/ui/icons">Click</router-link>
         </p>
         <p>For more examples and documentation please refer to <a href="https://github.com/hinesboy/mavonEditor"
@@ -321,19 +321,19 @@
         intPhoneModel: null,
         datepickerText: '',
         defaultSelect: 'Andromeda Galaxy',
-        fontAwesomeCode: '<i class="fa fa-arrow-left fa-2x mr"></i>\n' +
-          '<i class="fa fa-github fa-2x mr"></i>\n' +
-          '<i class="fa fa-bath fa-2x mr"></i>\n' +
-          '<i class="fa fa-grav fa-2x mr"></i>\n' +
+        fontAwesomeCode: '<i class="fa fa-arrow-left fa-2x me-0"></i>\n' +
+          '<i class="fa fa-github fa-2x me-0"></i>\n' +
+          '<i class="fa fa-bath fa-2x me-0"></i>\n' +
+          '<i class="fa fa-grav fa-2x me-0"></i>\n' +
           '<i class="fa fa-telegram fa-2x"></i>',
-        glyphiconCode: '<i class="glyphicon glyphicon-asterisk mr"></i>\n' +
-          '<i class="glyphicon glyphicon-heart mr"></i>\n' +
-          '<i class="glyphicon glyphicon-home mr"></i>\n' +
-          '<i class="glyphicon glyphicon-refresh mr"></i>\n' +
+        glyphiconCode: '<i class="glyphicon glyphicon-asterisk me-0"></i>\n' +
+          '<i class="glyphicon glyphicon-heart me-0"></i>\n' +
+          '<i class="glyphicon glyphicon-home me-0"></i>\n' +
+          '<i class="glyphicon glyphicon-refresh me-0"></i>\n' +
           '<i class="glyphicon glyphicon-camera"></i>',
-        lineAwesomeCode: '<i class="la la-arrow-left la-2x mr"></i>\n' +
-          '<i class="la la-github la-2x mr"></i>\n' +
-          '<i class="la la-facebook la-2x mr"></i>',
+        lineAwesomeCode: '<i class="la la-arrow-left la-2x me-0"></i>\n' +
+          '<i class="la la-github la-2x me-0"></i>\n' +
+          '<i class="la la-facebook la-2x me-0"></i>',
         vueColorCode: '<b-input-group class="colorpicker-wrapper">\n' +
           '  <input type="text" class="form-control" :value="color.hex"/>\n' +
           '  <Chrome\n' +
diff --git a/src/documentation/pages/Pages.vue b/src/documentation/pages/Pages.vue
@@ -70,7 +70,7 @@ routes: [
       </Widget>
       <Widget id="E-Commerce">
         <h3>E-commerce</h3>
-        <p class="alert alert-secondary font-weight-bold"><span class="text-warning">Important note.</span> This
+        <p class="alert alert-secondary fw-bold"><span class="text-warning">Important note.</span> This
           section is fully supported by <a
               href="https://github.com/flatlogic/nodejs-backend" rel="noopener noreferrer" target="_blank">Node.js
             backend</a> data.
diff --git a/src/documentation/pages/ScrollSpyComponent.vue b/src/documentation/pages/ScrollSpyComponent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="border-left pl-4 d-md-down-none scrollspy">
+  <div class="border-start ps-4 d-md-down-none scrollspy">
     <h6 class="fw-semi-bold text-uppercase">{{title}}</h6>
     <b-list-group v-b-scrollspy="150">
       <b-list-group-item @click="scrollToId(id)" v-for="id in ids" :key="id" :to="'#' + id">{{id.split('-').join(' ')}}</b-list-group-item>
diff --git a/src/pages/Dashboard/Dashboard.vue b/src/pages/Dashboard/Dashboard.vue
@@ -208,7 +208,7 @@
             >
               <div v-for="notification in mock.notifications"
                 class="d-flex align-items-start" :key="notification.id">
-                <i :class="`la la-${notification.icon} mr text-${notification.color}`" />
+                <i :class="`la la-${notification.icon} me-0 text-${notification.color}`" />
                 <p
                   :class="{ 'mb-0': notification.id === mock.notifications.length - 1 }"
                   v-html="notification.content"
diff --git a/src/pages/Dashboard/components/BigStat/BigStat.vue b/src/pages/Dashboard/components/BigStat/BigStat.vue
@@ -36,7 +36,7 @@
                 rotate-${bounce.profit ? '315' : '45'}`"
               />
             </div>
-            <p class="text-muted mb-0 mr"><small>Bounce Rate</small></p>
+            <p class="text-muted mb-0 me-0"><small>Bounce Rate</small></p>
           </div>
         </div>
       </div>
diff --git a/src/pages/Dashboard/components/Task/Task.vue b/src/pages/Dashboard/components/Task/Task.vue
@@ -9,7 +9,7 @@
       />
       <label :for="`checkbox${task.id}`" />
     </div>
-    <div class="task-content pl-2">
+    <div class="task-content ps-2">
       <p class="text-muted mb-xs"><small>{{task.type}}</small></p>
       <h6>{{task.title}}</h6>
       <p class="text-muted"><small>{{task.time}}</small></p>
diff --git a/src/pages/Email/components/MessageTable/MessageTable.vue b/src/pages/Email/components/MessageTable/MessageTable.vue
@@ -74,7 +74,7 @@
                 <td class="messageClip">
                   <i v-show="message.attachments" class="fa fa-paperclip" />
                 </td>
-                <td class="text-right">{{message.date}}</td>
+                <td class="text-end">{{message.date}}</td>
               </tr>
             </tbody>
           </table>
diff --git a/src/pages/Profile/Profile.vue b/src/pages/Profile/Profile.vue
@@ -46,15 +46,15 @@
             <b-col md="7" xs="12">
               <div class="stats-row mt-3">
                 <div class="profileStat stat-item">
-                  <p class="profileStatValue value text-right">251</p>
+                  <p class="profileStatValue value text-end">251</p>
                   <h6 class="name">Posts</h6>
                 </div>
                 <div class="profileStat stat-item">
-                  <p class="profileStatValue value text-right">9.38%</p>
+                  <p class="profileStatValue value text-end">9.38%</p>
                   <h6 class="name">Conversion</h6>
                 </div>
                 <div class="profileStat stat-item">
-                  <p class="profileStatValue value text-right">842</p>
+                  <p class="profileStatValue value text-end">842</p>
                   <h6 class="name">Followers</h6>
                 </div>
               </div>
diff --git a/src/pages/Ui/Alerts/Alerts.vue b/src/pages/Ui/Alerts/Alerts.vue
@@ -114,7 +114,7 @@ export default {
       }, {
         id: 'al-4',
         type: 'danger',
-        msg: '<span class="fw-semi-bold">Danger:</span> Change this and that and try again. <a class="btn btn-default btn-xs float-right mr" href="#">Ignore</a> <a class="btn btn-danger btn-xs float-right me-sm-1" href="#">Take this action</a>',
+        msg: '<span class="fw-semi-bold">Danger:</span> Change this and that and try again. <a class="btn btn-default btn-xs float-end mr" href="#">Ignore</a> <a class="btn btn-danger btn-xs float-end me-sm-1" href="#">Take this action</a>',
         visible: [true, true, true],
       }],
     };
diff --git a/src/pages/Ui/Buttons/Buttons.vue b/src/pages/Ui/Buttons/Buttons.vue
@@ -12,7 +12,7 @@
               Use any of the available button classes to quickly create a styled button.
               Semantically distinguishable beauty.
             </p>
-            <p class="text-left">
+            <p class="text-start">
               <b-button variant="default" class="width-100 mb-3 me-3">Default</b-button>
               <b-button variant="primary" class="width-100 mb-3 me-3 text-white">Primary</b-button>
               <b-button variant="info" class="width-100 mb-3 me-3">Info</b-button>
diff --git a/src/pages/Ui/ListGroups/ListGroups.vue b/src/pages/Ui/ListGroups/ListGroups.vue
@@ -16,8 +16,8 @@
             justify-content-between align-items-center"
             v-for="element in sortableList" :key="element.id">
             <div>
-              <i class="fa fa-sort mr-sm" />
-              <span class="mr-sm">{{element.id}}</span>{{element.text}}
+              <i class="fa fa-sort me-sm-1" />
+              <span class="me-sm-1">{{element.id}}</span>{{element.text}}
             </div>
             <i class="fa fa-times text-muted" />
           </div>
@@ -27,7 +27,7 @@
       title="<h4>Nestable <span class='fw-semi-bold'>List</span></h4>"
       close refresh settings customHeader
     >
-      <p className="fs-mini">
+      <p class="fs-mini">
         There is a scientific theory that you can arrange this list in such way that there will
         be no more saddness
         in the whole world. Can you? Touch devices supported
diff --git a/src/pages/Visits/Visits.vue b/src/pages/Visits/Visits.vue
@@ -185,12 +185,12 @@
               <button class="list-group-item text-start">
                 <div class="d-flex flex-row">
                   <div>
-                     <span class="thumb-sm float-left me-2">
+                     <span class="thumb-sm float-start me-1">
                       <img class="rounded-circle" src="../../assets/people/a2.jpg" alt="woman" />
                       <i class="status status-bottom bg-success" />
                      </span>
                   </div>
-                  <div>
+                  <div class="ms-2">
                     <h6 class="m-0">Chris Gray</h6>
                     <p class="help-block text-ellipsis m-0">Hey! What&apos;s up? So many times since we</p>
                   </div>
@@ -199,12 +199,12 @@
               <button class="list-group-item text-start">
                 <div class="d-flex flex-row">
                   <div>
-                    <span class="thumb-sm float-left me-2">
+                    <span class="thumb-sm float-start me-1">
                       <img class="rounded-circle" src="../../assets/people/a4.jpg" alt="woman" />
                       <i class="status status-bottom bg-success" />
                     </span>
                   </div>
-                  <div>
+                  <div class="ms-2">
                     <h6 class="m-0">Jamey Brownlow</h6>
                     <p class="help-block m-0">
                       Good news coming tonight. Seems they agreed to proceed
@@ -215,12 +215,12 @@
               <button class="list-group-item text-start">
                 <div class="d-flex flex-row">
                   <div>
-                    <span class="thumb-sm float-left mr">
+                    <span class="thumb-sm float-start me-1">
                       <img class="rounded-circle" src="../../assets/people/a1.jpg" alt="woman" />
                       <i class="status status-bottom bg-warning" />
                     </span>
                   </div>
-                  <div>
+                  <div class="ms-2">
                     <h6 class="m-0">Livia Walsh</h6>
                     <p class="help-block text-ellipsis m-0">Check my latest email plz!</p>
                   </div>
@@ -229,12 +229,12 @@
               <button class="list-group-item text-start">
                 <div class="d-flex flex-row">
                   <div>
-                     <span class="thumb-sm float-left mr">
+                     <span class="thumb-sm float-start me-1">
                       <img class="rounded-circle" src="../../assets/people/a5.jpg" alt="man" />
                       <i class="status status-bottom bg-danger" />
                     </span>
                   </div>
-                  <div>
+                  <div class="ms-2">
                     <h6 class="m-0">Jaron Fitzroy</h6>
                     <p class="help-block text-ellipsis m-0">What about summer break?</p>
                   </div>
@@ -327,11 +327,11 @@
           <Calendar />
           <div class="list-group fs-mini">
             <a href="#" class="list-group-item text-ellipsis">
-              <span class="badge bg-pill bg-info float-right">6:45</span>
+              <span class="badge bg-pill bg-info float-end">6:45</span>
               Weed out the flower bed
             </a>
             <a href="#" class="list-group-item text-ellipsis">
-              <span class="badge bg-pill bg-success float-right">9:41</span>
+              <span class="badge bg-pill bg-success float-end">9:41</span>
               Stop world water pollution
             </a>
           </div>
diff --git a/src/pages/Widgets/Widgets.vue b/src/pages/Widgets/Widgets.vue
@@ -312,7 +312,7 @@
             <h4 class="title text-white">
               <span class="fw-normal">Sunnyvale</span>, CA
             </h4>
-            <div class="info text-right">
+            <div class="info text-end">
               <i class="fa fa-map-marker h1 m-0 me-sm-1" />
               <h6 class="m-0 mt-xs">FLORIDA, USA</h6>
               <p class="fs-sm">9:41 am</p>
diff --git a/src/pages/Widgets/components/changes-chart/ChangesChart.vue b/src/pages/Widgets/components/changes-chart/ChangesChart.vue
@@ -13,7 +13,7 @@
           <p class="h4 m-0">18.7M</p>
           <p class="deemphasize">Shares Traded</p>
         </b-col>
-        <b-col xs='6' class="text-right">
+        <b-col xs='6' class="text-end">
           <p class="h4 m-0">19.9B</p>
           <p class="deemphasize">Market Cap</p>
         </b-col>
@@ -25,7 +25,7 @@
           <p class="h3 m-0 text-success fw-semi-bold">+120.93</p>
           <p class="deemphasize">Yearly Change</p>
         </b-col>
-        <b-col xs='6' class="text-right">
+        <b-col xs='6' class="text-end">
           <Sparklines :data="sparklineData" :options="sparklineOptions" :width="80" :height="25" />
           <p class="deemphasize">GOOG</p>
         </b-col>
diff --git a/src/pages/Widgets/components/flot-charts/FlotCharts.vue b/src/pages/Widgets/components/flot-charts/FlotCharts.vue

Original file line number	Diff line number	Diff line change
`@@ -208,7 +208,7 @@`
`208`	`208`	`>`
`209`	`209`	`<div v-for="notification in mock.notifications"`
`210`	`210`	`class="d-flex align-items-start" :key="notification.id">`
`211`		- <i :class="`la la-${notification.icon} mr text-${notification.color}`" />
	`211`	+ <i :class="`la la-${notification.icon} me-0 text-${notification.color}`" />
`212`	`212`	`<p`
`213`	`213`	`:class="{ 'mb-0': notification.id === mock.notifications.length - 1 }"`
`214`	`214`	`v-html="notification.content"`