Merge pull request #707 from puzzle/feature/698/bootstrap-update

Bootstrap update
puzzle · Jul 28, 2023 · a9263f6 · a9263f6
2 parents 2f65eb4 + 666797c
commit a9263f6
Show file tree

Hide file tree

Showing 18 changed files with 78 additions and 114 deletions.
diff --git a/frontend/app/styles/app.scss b/frontend/app/styles/app.scss
@@ -48,10 +48,6 @@ $font-family-sans-serif: var(--pzsh-font-family) !default;
   flex-direction: row;
 }
 
-.float-right {
-  float: right !important;
-}
-
 .pt-10 {
   padding-top: 10%;
 }
@@ -71,13 +67,6 @@ $font-family-sans-serif: var(--pzsh-font-family) !default;
   margin-top: 1%;
 }
 
-.ml-2 {
-  margin-left: 2%;
-}
-.ml-5 {
-  margin-left: 5%;
-}
-
 .mb-2 {
   margin-bottom: 2%;
 }
@@ -122,24 +111,10 @@ li a {
   margin-bottom: 5px !important;
 }
 
-.ml-5 {
-  margin-left: 5%;
-}
-
 .mt-32 {
   margin-top: 32px;
 }
 
-.ml-15 {
-  margin-left: 15px;
-}
-
-.ml-254 {
-  margin-left: 254px !important;
-}
-.ml-238 {
-  margin-left: 238px !important;
-}
 .mt-60 {
   margin-top: 54px !important;
 }
@@ -298,10 +273,6 @@ li a {
   background-color: #f8f8f8;
 }
 
-.pl-none {
-  padding-left: 0 !important;
-}
-
 .search-badge {
   padding: 5px 10px 3px 8px !important;
   margin-left: 10px;

diff --git a/frontend/app/styles/custom-bootstrap.scss b/frontend/app/styles/custom-bootstrap.scss
@@ -0,0 +1,2 @@
+$btn-color:  #ff0000;
+$btn-color:  #ff0000
diff --git a/frontend/app/styles/encryptable-form.scss b/frontend/app/styles/encryptable-form.scss
@@ -58,7 +58,6 @@
   width: 100%;
   max-width: 100%;
   height: 35px;
-  margin-left: 5%;
 }
 
 .d-flex .ember-basic-dropdown {

diff --git a/frontend/app/styles/nav-bar.scss b/frontend/app/styles/nav-bar.scss
@@ -121,10 +121,6 @@
     padding-left: 32px !important;
   }
 
-  .ml-238 {
-    margin-left: 238px !important;
-  }
-
   .side-nav-bar-teams-list .list-group-item:hover {
     cursor: pointer;
     background-color: #1E5A96 !important;

diff --git a/frontend/app/styles/side-nav-bar.scss b/frontend/app/styles/side-nav-bar.scss
@@ -16,7 +16,7 @@
   background-color: white;
 }
 
-.toggle-button.active {
+.toggle-button-active {
   background-color: white !important;
   border-color: #238BCA !important;
 }
@@ -142,7 +142,7 @@
     background-color: rgba(0, 0, 0, 0.12) !important;
   }
 
-  .toggle-button.active {
+  .toggle-button-active {
     background-color: rgba(0, 0, 0, 0.12) !important;
     border-color: #116289 !important;
   }
@@ -169,7 +169,6 @@
     border-bottom-right-radius: 0;
     border-color: rgba(167, 167, 167, 0.44) !important;
   }
-
 }
 
 @media screen and (min-width: 1501px) {
@@ -189,15 +188,14 @@
     border-bottom-right-radius: 0;
     border-color: rgba(167, 167, 167, 0.44) !important;
   }
-
 }
 
 @media screen and (min-width: 992px) {
   .sidebar {
     background-color: #ffffff;
   }
 
-  .toggle-button.active {
+  .toggle-button-active {
     background-color: #fff !important;
     border-color: #238BCA !important;
   }

diff --git a/frontend/app/templates/components/admin/user/table.hbs b/frontend/app/templates/components/admin/user/table.hbs
@@ -4,37 +4,37 @@
       <th>
         {{t "admin.users.index.username"}}
         <span role="button" {{action "sortBy" "username"}} id="sort-username">
-          <img class="icon-big-button float-right" src="/assets/images/angle-down-blue.svg" alt="v">
+          <img class="icon-big-button float-end" src="/assets/images/angle-down-blue.svg" alt="v">
         </span>
       </th>
       <th>
         {{t "admin.users.index.name"}}
         <span role="button" {{action "sortBy" "givenname"}} id="sort-name">
-          <img class="icon-big-button float-right" src="/assets/images/angle-down-blue.svg" alt="v">
+          <img class="icon-big-button float-end" src="/assets/images/angle-down-blue.svg" alt="v">
         </span>
       </th>
       <th>
         {{t "admin.users.index.last_login_at"}}
         <span role="button" {{action "sortBy" "last_login_at"}} id="sort-login-at">
-          <img class="icon-big-button float-right" src="/assets/images/angle-down-blue.svg" alt="v">
+          <img class="icon-big-button float-end" src="/assets/images/angle-down-blue.svg" alt="v">
         </span>
       </th>
       <th>
         {{t "admin.users.index.last_login_from"}}
         <span role="button" {{action "sortBy" "last_login_from"}} id="sort-login-from">
-          <img class="icon-big-button float-right" src="/assets/images/angle-down-blue.svg" alt="v">
+          <img class="icon-big-button float-end" src="/assets/images/angle-down-blue.svg" alt="v">
         </span>
       </th>
       <th>
         {{t "admin.users.index.auth"}} {{t "admin.users.index.provider_uid"}}
         <span role="button" {{action "sortBy" "auth"}} id="sort-auth">
-          <img class="icon-big-button float-right" src="/assets/images/angle-down-blue.svg" alt="v">
+          <img class="icon-big-button float-end" src="/assets/images/angle-down-blue.svg" alt="v">
         </span>
       </th>
       <th width="200">
         {{t "admin.users.index.role"}}
         <span role="button" {{action "sortBy" "role"}} id="sort-role">
-          <img class="icon-big-button float-right" src="/assets/images/angle-down-blue.svg" alt="v">
+          <img class="icon-big-button float-end" src="/assets/images/angle-down-blue.svg" alt="v">
         </span>
       </th>
       <th>{{t "admin.users.index.action"}}</th>

diff --git a/frontend/app/templates/components/encryptable/card-show.hbs b/frontend/app/templates/components/encryptable/card-show.hbs
@@ -11,7 +11,7 @@
           </div>
         </div>
         <div class="col-auto">
-          <img class="img d-inline w-30 float-left icon-big-button" src="/assets/images/key.svg" alt="key">
+          <img class="img d-inline w-30 float-start icon-big-button" src="/assets/images/key.svg" alt="key">
         </div>
       </div>
     </div>
@@ -22,12 +22,12 @@
 {{else}}
   <div class="card encryptable-card encryptable-detail">
     <div role="button" class="card-header" {{on "click" this.swapToPreview}}>
-      <img class="img d-inline mr-2 icon-button" src="/assets/images/key.svg" alt="key">
+      <img class="img d-inline me-2 icon-button" src="/assets/images/key.svg" alt="key">
       <p class="d-inline">{{@encryptable.name}}</p>
     </div>
     <div class="card-body">
       <div class="row mb-2">
-        <div class="col-sm-8 pr-0">
+        <div class="col-sm-8 pe-0">
           <Input class="d-inline form-control" disabled="true" @value={{@encryptable.cleartextUsername}} />
         </div>
         <div class="col-sm-3">
@@ -37,7 +37,7 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-sm-8 pr-0">
+        <div class="col-sm-8 pe-0">
           <div class="password-wrapper">
             <Input class="d-inline form-control" disabled="true" @value={{@encryptable.cleartextPassword}} />
             <div role="button" class="show-password-link show-password-link-sm {{if this.isPasswordVisible "visibility-hidden"}}" {{on "click" this.showPassword}} href="#">{{t "encryptable/credentials.show.show_password"}}</div>

diff --git a/frontend/app/templates/components/encryptable/form.hbs b/frontend/app/templates/components/encryptable/form.hbs
@@ -124,10 +124,10 @@
                          alt="delete attribute field">
                   </button>
                   {{#if (eq attribute "password")}}
-                    <PasswordStrengthMeter class="col-12 col-lg-9 px-0 mb-2 mb-md-0 ml-3"
+                    <PasswordStrengthMeter class="col-12 col-lg-9 px-0 mb-2 mb-md-0 ms-3"
                                            @password={{this.changeset.cleartextPassword}}/>
                     <div></div>
-                    <button class="btn btn-secondary btn-block col-lg-7 mb-md-4 ml-3 mt-2" type="button" {{on "click"
+                    <button class="btn btn-secondary btn-block col-lg-7 mb-md-4 ms-3 mt-2" type="button" {{on "click"
                                                                                                 this.setRandomPassword}}>
                       {{t "encryptable/credentials.edit.random_password"}}
                     </button>
@@ -136,7 +136,7 @@
               {{/each}}
             </div>
             {{#if (gt this.inactiveFields.length 0)}}
-              <div class="ml-3 mb-2 mt-3">{{t "additionalField"}}</div>
+              <div class="ms-3 mb-2 mt-3">{{t "additionalField"}}</div>
               <div id="encryptable-form-additional-field" class="d-flex flex-row">
                 <PowerSelect
                   id="add-field-dropdown"
@@ -147,7 +147,7 @@
                   @onChange={{fn (mut this.selectedAttribute)}} as |attribute|>
                   {{t attribute}}
                 </PowerSelect>
-                <button class="btn btn-success d-inline-block p-1 ml-4 add-field" type="button" {{on "click" (action "addField")}} >
+                <button class="btn btn-success d-inline-block p-1 ms-4 add-field" type="button" {{on "click" (action "addField")}} >
                   <img id="add-field-button" class="d-inline" src="/assets/images/plus-white.svg"
                        alt="add attribute field">
                 </button>

diff --git a/frontend/app/templates/components/encryptable/row.hbs b/frontend/app/templates/components/encryptable/row.hbs
@@ -24,7 +24,7 @@
         {{@encryptable.sender_name}} / {{moment-format @encryptable.createdAt "DD.MM.YYYY hh:mm"}}
       </div>
 
-      <div class="ml-auto col-md-auto d-none d-md-block">
+      <div class="ms-auto col-md-auto d-none d-md-block">
         <a class="mx-1 text-decoration-none" role="button" href={{this.downloadLink}}>
           <img class="icon-medium-button d-inline" src="/assets/images/file_download.svg" alt="download file">
           <BsTooltip @title={{t "download_file"}} @delayShow="1000" />
@@ -60,49 +60,49 @@
       {{else}}
         {{#if (and (lte this.getAttributesAmount 2) (gt this.getAttributesAmount 0))}}
           {{#if (is-included @encryptable.usedEncryptedDataAttrs "username")}}
-            <div class="encryptable-container d-none d-md-block d-lg-block d-xl-block ml-0 mr-md-2 ml-md-5 mr-lg-2 ml-lg-5 mr-xl-2 ml-xl-2">
+            <div class="encryptable-container d-none d-md-block d-lg-block d-xl-block ms-0 me-md-2 ms-md-5 me-lg-2 ms-lg-5 me-xl-2 ms-xl-2">
               <Encryptable::AttributeField @attribute="username" @row={{true}} @encryptable={{@encryptable}}
                                            @visibleByDefault={{false}}/>
             </div>
           {{/if}}
           {{#if (is-included @encryptable.usedEncryptedDataAttrs "password")}}
-            <div class="encryptable-container d-none d-md-block d-lg-block d-xl-block mr-0 ml-0 mr-md-2 ml-md-5 mr-lg-2 ml-lg-5 mr-xl-2 ml-xl-2">
+            <div class="encryptable-container d-none d-md-block d-lg-block d-xl-block me-0 ms-0 me-md-2 ms-md-5 me-lg-2 ms-lg-5 me-xl-2 ms-xl-2">
               <Encryptable::AttributeField @attribute="password" @row={{true}} @encryptable={{@encryptable}}
                                            @visibleByDefault={{false}}/>
             </div>
           {{/if}}
           {{#if (is-included @encryptable.usedEncryptedDataAttrs "email")}}
-            <div class="encryptable-container d-none d-md-block d-lg-block d-xl-block mr-0 ml-0 mr-md-2 ml-md-5 mr-lg-2 ml-lg-5 mr-xl-2 ml-xl-2">
+            <div class="encryptable-container d-none d-md-block d-lg-block d-xl-block me-0 ms-0 me-md-2 ms-md-5 me-lg-2 ms-lg-5 me-xl-2 ms-xl-2">
               <Encryptable::AttributeField @attribute="email" @row={{true}} @encryptable={{@encryptable}}
                                            @visibleByDefault={{false}}/>
             </div>
           {{/if}}
           {{#if (is-included @encryptable.usedEncryptedDataAttrs "token")}}
-            <div class="encryptable-container d-none d-md-block d-lg-block d-xl-block mr-0 ml-0 mr-md-2 ml-md-5 mr-lg-2 ml-lg-5 mr-xl-2 ml-xl-2">
+            <div class="encryptable-container d-none d-md-block d-lg-block d-xl-block me-0 ms-0 me-md-2 ms-md-5 me-lg-2 ms-lg-5 me-xl-2 ms-xl-2">
               <Encryptable::AttributeField @attribute="token" @row={{true}} @encryptable={{@encryptable}}
                                            @visibleByDefault={{false}}/>
             </div>
           {{/if}}
           {{#if (is-included @encryptable.usedEncryptedDataAttrs "pin")}}
-            <div class="encryptable-container d-none d-md-block d-lg-block d-xl-block mr-0 ml-0 mr-md-2 ml-md-5 mr-lg-2 ml-lg-5 mr-xl-2 ml-xl-2">
+            <div class="encryptable-container d-none d-md-block d-lg-block d-xl-block me-0 ms-0 me-md-2 me-md-5 me-lg-2 ms-lg-5 me-xl-2 ms-xl-2">
               <Encryptable::AttributeField @attribute="pin" @row={{true}} @encryptable={{@encryptable}}
                                            @visibleByDefault={{false}}/>
             </div>
           {{/if}}
           {{#if (is-included @encryptable.usedEncryptedDataAttrs "custom_attr")}}
-            <div class="encryptable-container d-none d-md-block d-lg-block d-xl-block mr-0 ml-0 mr-md-2 ml-md-5 mr-lg-2 ml-lg-5 mr-xl-2 ml-xl-2">
+            <div class="encryptable-container d-none d-md-block d-lg-block d-xl-block me-0 ms-0 me-md-2 ms-md-5 me-lg-2 ms-lg-5 me-xl-2 ms-xl-2">
               <Encryptable::AttributeField @attribute="customAttr" @row={{true}} @encryptable={{@encryptable}}
                                            @visibleByDefault={{false}}/>
             </div>
           {{/if}}
         {{else}}
-          <LinkTo class="col-6 underline-hover break-words account-link mt-2 mb-2 ml-2 p-0 d-none d-md-block d-lg-block d-xl-block" @route="encryptables.show"
+          <LinkTo class="col-6 underline-hover break-words account-link mt-2 mb-2 ms-2 p-0 d-none d-md-block d-lg-block d-xl-block" @route="encryptables.show"
                   @model={{@encryptable.id}}>
             {{t "encryptable/credentials.row.clickToSeeAttrs"}}
           </LinkTo>
         {{/if}}
       {{/if}}
-      <div class="col-md-auto d-none d-md-none d-lg-none d-xl-block encryptable-row-icons ml-auto">
+      <div class="col-md-auto d-none d-md-none d-lg-none d-xl-block encryptable-row-icons ms-auto">
         {{#unless this.isTransferredCredentials }}
           <span class="mx-1" role="button" {{on "click" this.toggleEncryptableEdit}}>
             <img class="icon-medium-button d-inline" src="/assets/images/edit.svg" alt="edit">
@@ -116,4 +116,4 @@
       </div>
     </div>
   {{/if}}
-{{/if}}
+{{/if}}
diff --git a/frontend/app/templates/components/encryptable/show.hbs b/frontend/app/templates/components/encryptable/show.hbs
@@ -8,7 +8,7 @@
   <CredentialTransfer @onAbort={{this.toggleCredentialSharing}} @title={{t "encryptable/transferring/credential.new.title"}} @encryptableId={{@encryptable.id}} @encryptableName={{@encryptable.name}}/>
 {{/if}}
 {{#if this.isFile}}
-  <div class="container px-5 pt-4 h-100 bg-white pl-none encryptable-container-smartphone mb-15">
+  <div class="container px-5 pt-4 h-100 bg-white ps-0 encryptable-container-smartphone mb-15">
     <div class="row mb-3">
       <div class="col">
         <a id="encryptable-show-back" role="button" {{on "click" this.transitionBack}}>
@@ -57,7 +57,7 @@
     </div>
   </div>
 {{else}}
-  <div class="container px-5 pt-4 h-100 bg-white pl-none encryptable-container-smartphone mb-15">
+  <div class="container px-5 pt-4 h-100 bg-white ps-0 encryptable-container-smartphone mb-15">
     <div class="row mb-3">
       <div class="col">
         <a id="encryptable-show-back" role="button" {{on "click" this.transitionBack}}>

diff --git a/frontend/app/templates/components/folder/show.hbs b/frontend/app/templates/components/folder/show.hbs
@@ -4,9 +4,9 @@
 {{#if this.isNewEncryptable}}
   <Encryptable::Form @onAbort={{this.toggleEncryptableCreating}} @title={{t "encryptable/credentials.new.title"}}/>
 {{/if}}
-<div id="folder-header-{{@folder.id}}" class="pl-2 pr-2 folder-card-header {{if this.isExpanded "br-4"}}">
+<div id="folder-header-{{@folder.id}}" class="ps-2 pe-2 folder-card-header {{if this.isExpanded "br-4"}}">
   <div class="d-flex row justify-content-between folder-show-header">
-    <div class="col-auto pr-0 my-auto" role="button" {{on "click" this.toggleExpanded }}>
+    <div class="col-auto pe-0 my-auto" role="button" {{on "click" this.toggleExpanded }}>
       <img class="icon icon-folder py-auto" src="/assets/images/folder.svg" alt="">
     </div>
     <div class="col overflow-hidden my-auto break-on-smartphone" role="button" {{on "click" this.toggleExpanded }}>
@@ -28,12 +28,12 @@
         </DeleteWithConfirmation>
       {{/unless}}
     </div>
-    <div class="col-auto pl-0 justify-content-between d-flex align-items-center">
+    <div class="col-auto ps-0 justify-content-between d-flex align-items-center">
       <span role="button" name="folder-collapse" {{on "click" this.toggleExpanded }}>
         {{#if this.isExpanded}}
-          <img class="icon-big-button float-right" src="/assets/images/angle-down.svg" alt="v">
+          <img class="icon-big-button float-end" src="/assets/images/angle-down.svg" alt="v">
         {{else}}
-          <img class="icon-big-button float-right" src="/assets/images/angle-left.svg" alt="<">
+          <img class="icon-big-button float-end" src="/assets/images/angle-left.svg" alt="<">
         {{/if}}
       </span>
     </div>