More updates

datalab-org · Dec 4, 2024 · 48d928f · 48d928f
1 parent 2a0c448
commit 48d928f
Show file tree

Hide file tree

Showing 14 changed files with 72 additions and 72 deletions.
diff --git a/webapp/src/components/AddToCollectionModal.vue b/webapp/src/components/AddToCollectionModal.vue
@@ -3,8 +3,8 @@
     <Modal :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)">
       <template #header> Add to collections </template>
       <template #body>
-        <div class="form-row">
-          <div class="form-group col-md-8">
+        <div class="row">
+          <div class="col-md-8 mb-3">
             <label for="items-selected" class="col-form-label">Items Selected:</label>
             <div id="items-selected" class="dynamic-input">
               <FormattedItemName
@@ -17,8 +17,8 @@
             </div>
           </div>
         </div>
-        <div class="form-row">
-          <div class="col-md-12 form-group">
+        <div class="row">
+          <div class="col-md-12 mb-3">
             <label id="addToCollectionLabel">Insert into collection:</label>
             <CollectionSelect
               id="collection-select"

diff --git a/webapp/src/components/CellInformation.vue b/webapp/src/components/CellInformation.vue
@@ -3,13 +3,13 @@
     <!-- Sample information -->
     <div class="row">
       <div class="col-md-8">
-        <div id="sample-information" class="form-row">
-          <div class="form-group col-sm-8">
-            <label for="cell-name" class="mr-2">Name</label>
+        <div id="sample-information" class="row">
+          <div class="mb-3 col-sm-8">
+            <label for="cell-name" class="form-label mr-2">Name</label>
             <input id="cell-name" v-model="Name" class="form-control" />
           </div>
-          <div class="form-group col-sm-4">
-            <label for="cell-date" class="mr-2">Date Created</label>
+          <div class="mb-3 col-sm-4">
+            <label for="cell-date" class="form-labelmr-2">Date Created</label>
             <input
               id="cell-date"
               v-model="DateCreated"
@@ -18,23 +18,23 @@
             />
           </div>
         </div>
-        <div class="form-row">
-          <div class="form-group col-md-3 col-sm-2 col-6 pr-2">
-            <label for="cell-refcode">Refcode</label>
+        <div class="row">
+          <div class="mb-3 col-md-3 col-sm-2 col-6 pr-2">
+            <label for="cell-refcode" class="form-label">Refcode</label>
             <div id="cell-refcode">
               <FormattedRefcode :refcode="Refcode" />
             </div>
           </div>
-          <div class="form-group col-md-3 col-sm-3 col-6 pb-3">
+          <div class="mb-3 col-md-3 col-sm-3 col-6 pb-3">
             <ToggleableCreatorsFormGroup v-model="ItemCreators" :refcode="Refcode" />
           </div>
           <div class="col-md-6 col-sm-7 pr-2">
             <ToggleableCollectionFormGroup v-model="Collections" />
           </div>
         </div>
-        <div class="form-row">
-          <div class="form-group col-sm-4 pr-2">
-            <label for="cell-format-dropdown">Cell format</label>
+        <div class="row">
+          <div class="mb-3 col-sm-4 pr-2">
+            <label for="cell-format-dropdown" class="form-label">Cell format</label>
             <select id="cell-format-dropdown" v-model="CellFormat" class="form-control">
               <option
                 v-for="(description, key) in availableCellFormats"
@@ -45,8 +45,8 @@
               </option>
             </select>
           </div>
-          <div class="form-group col-sm-8">
-            <label for="cell-format-description">Cell format description</label>
+          <div class="mb-3 col-sm-8">
+            <label for="cell-format-description" class="form-label">Cell format description</label>
             <input
               id="cell-format-description"
               v-model="CellFormatDescription"
@@ -56,9 +56,9 @@
           </div>
         </div>
 
-        <div class="form-row py-4">
-          <div class="form-group col-lg-3 col-md-4 pr-3">
-            <label for="cell-characteristic-mass">Active mass (mg)</label>
+        <div class="row">
+          <div class="mb-3 col-lg-3 col-md-4">
+            <label for="cell-characteristic-mass" class="form-label">Active mass (mg)</label>
             <input
               id="cell-characteristic-mass"
               v-model="CharacteristicMass"
@@ -67,12 +67,12 @@
               :class="{ 'red-border': isNaN(CharacteristicMass) }"
             />
           </div>
-          <div class="form-group col-lg-4 col-md-4 pr-3">
-            <label for="cell-chemform">Active formula</label>
+          <div class="mb-3 col-lg-4 col-md-4">
+            <label for="cell-chemform" class="form-label">Active formula</label>
             <ChemFormulaInput id="cell-chemform" v-model="ChemForm" />
           </div>
-          <div class="form-group col-lg-3 col-md-4">
-            <label for="cell-characteristic-molar-mass">Molar mass</label>
+          <div class="mb-3 col-lg-3 col-md-4">
+            <label for="cell-characteristic-molar-mass" class="form-label">Molar mass</label>
             <input
               id="cell-characteristic-molar-mass"
               v-model="MolarMass"
@@ -84,7 +84,7 @@
         </div>
         <div class="row">
           <div class="col">
-            <label id="cell-description-label">Description</label>
+            <label id="cell-description-label" class="form-label">Description</label>
             <TinyMceInline
               v-model="SampleDescription"
               aria-labelledby="cell-description-label"

diff --git a/webapp/src/components/CellPreparationInformation.vue b/webapp/src/components/CellPreparationInformation.vue
@@ -1,9 +1,9 @@
 <template>
   <div id="cell-preparation-information">
-    <label class="mr-2 pb-2">Cell Construction</label>
+    <label class="form-label mr-2 pb-2">Cell Construction</label>
 
-    <div class="form-group ml-5">
-      <label class="subheading cell-component-label mt-4 pb-1" for="pos-electrode-table"
+    <div class="mb-3 ml-5">
+      <label class="form-label subheading cell-component-label mt-4 pb-1" for="pos-electrode-table"
         >Positive electrode</label
       >
       <div class="card component-card">
@@ -17,8 +17,8 @@
       </div>
     </div>
 
-    <div class="form-group ml-5">
-      <label class="subheading cell-component-label mt-4 pb-1" for="electrolyte-table"
+    <div class="mb-3 ml-5">
+      <label class="form-label subheading cell-component-label mt-4 pb-1" for="electrolyte-table"
         >Electrolyte</label
       >
       <div class="card component-card">
@@ -32,8 +32,8 @@
       </div>
     </div>
 
-    <div class="form-group ml-5">
-      <label class="subheading cell-component-label mt-4 pb-1" for="neg-electrode-table"
+    <div class="mb-3 ml-5">
+      <label class="form-label subheading cell-component-label mt-4 pb-1" for="neg-electrode-table"
         >Negative electrode</label
       >
       <div class="card component-card">
@@ -47,8 +47,8 @@
       </div>
     </div>
 
-    <div class="form-group ml-5 mt-3">
-      <label id="synthesis-procedure-label" class="subheading">Procedure</label>
+    <div class="mb-3 ml-5 mt-3">
+      <label id="synthesis-procedure-label" class="form-label subheading">Procedure</label>
       <TinyMceInline
         v-model="CellPreparationDescription"
         aria-labelledby="synthesis-procedure-label"

diff --git a/webapp/src/components/CollectionInformation.vue b/webapp/src/components/CollectionInformation.vue
@@ -2,15 +2,15 @@
   <div class="container">
     <div class="row">
       <div class="col">
-        <div id="collection-information" class="form-row">
+        <div id="collection-information" class="row">
           <div class="col-md-2">
-            <label id="creators" class="mr-2">Creators</label>
+            <label id="creators" class="form-label mr-2">Creators</label>
             <div>
               <Creators :creators="CollectionCreators" :size="36" />
             </div>
           </div>
-          <div class="form-group col">
-            <label for="name" class="mr">Title</label>
+          <div class="mb-3 col">
+            <label for="name" class="form-label mr">Title</label>
             <input
               id="name"
               v-model="Title"
@@ -21,7 +21,7 @@
           </div>
         </div>
 
-        <label id="description-label" class="mr-2">Description</label>
+        <label id="description-label" class="form-label mr-2">Description</label>
         <TinyMceInline
           v-model="CollectionDescription"
           aria-labelledby="description-label"

diff --git a/webapp/src/components/EquipmentInformation.vue b/webapp/src/components/EquipmentInformation.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <!-- Item information -->
-    <div id="equipment-information" class="form-row">
+    <div id="equipment-information" class="row">
       <div class="form-group col-md-2 col-sm-4">
         <label class="mr-2">Refcode</label>
         <div><FormattedRefcode :refcode="Refcode" /></div>
@@ -19,7 +19,7 @@
         <input id="equip-date" v-model="EquipmentDate" type="datetime-local" class="form-control" />
       </div>
     </div>
-    <div class="form-row">
+    <div class="row">
       <div class="form-group col-md-2">
         <label id="collections" class="mr-2">Collections</label>
         <div>
@@ -37,7 +37,7 @@
         <input id="equip-location" v-model="Location" class="form-control" />
       </div>
     </div>
-    <div class="form-row">
+    <div class="row">
       <div class="form-group col-md-8">
         <label for="equip-serial" class="mr-2">Serial no(s).</label>
         <input id="equip-serial" v-model="SerialNos" class="form-control" />
@@ -49,7 +49,7 @@
         </div>
       </div>
     </div>
-    <div class="form-row">
+    <div class="row">
       <div class="form-group col-md-8">
         <label for="equip-contact" class="mr-2">Contact information</label>
         <input id="equip-contact" v-model="Contact" class="form-control" />

diff --git a/webapp/src/components/GetEmailModal.vue b/webapp/src/components/GetEmailModal.vue
@@ -6,7 +6,7 @@
       @update:model-value="$emit('update:modelValue', $event)"
     >
       <template #body>
-        <div class="form-row">
+        <div class="row">
           <div class="form-group">
             <label for="sample-id" class="col-form-label"
               >Enter your email address to receive a sign-in/registration link:</label

diff --git a/webapp/src/components/QRCodeModal.vue b/webapp/src/components/QRCodeModal.vue
@@ -3,7 +3,7 @@
     <Modal :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)">
       <template #header>QR Code</template>
       <template #body>
-        <div class="form-row">
+        <div class="row">
           <div ref="qrcode" class="form-group mx-auto" data-testid="qrcode">
             <QRCode :refcode="refcode" />
           </div>

diff --git a/webapp/src/components/SampleInformation.vue b/webapp/src/components/SampleInformation.vue
@@ -3,16 +3,16 @@
     <!-- Sample information -->
     <div class="row">
       <div class="col">
-        <div id="sample-information" class="form-row">
-          <div class="form-group col-sm-4 pr-2">
+        <div id="sample-information" class="row">
+          <div class="col-sm-4 pe-2">
             <label for="samp-name">Name</label>
             <input id="samp-name" v-model="Name" class="form-control" />
           </div>
-          <div class="form-group col-sm-4 col-6 pr-2">
+          <div class="col-sm-4 col-6 pe-2">
             <label for="samp-chemform">Chemical formula</label>
             <ChemFormulaInput id="samp-chemform" v-model="ChemForm" />
           </div>
-          <div class="form-group col-sm-4 col-6">
+          <div class="col-sm-4 col-6">
             <label for="samp-date">Date Created</label>
             <input
               id="samp-date"
@@ -22,21 +22,21 @@
             />
           </div>
         </div>
-        <div class="form-row">
-          <div class="form-group col-md-3 col-sm-2 col-6">
+        <div class="row">
+          <div class="col-md-3 col-sm-2 col-6">
             <label for="samp-refcode">Refcode</label>
             <div id="samp-refcode">
               <FormattedRefcode :refcode="Refcode" />
             </div>
           </div>
-          <div class="form-group col-md-3 col-sm-3 col-6 pb-3">
+          <div class="col-md-3 col-sm-3 col-6 pb-3">
             <ToggleableCreatorsFormGroup v-model="ItemCreators" :refcode="Refcode" />
           </div>
-          <div class="col-md-6 col-sm-7 pr-2">
+          <div class="col-md-6 col-sm-7 pe-2">
             <ToggleableCollectionFormGroup v-model="Collections" />
           </div>
         </div>
-        <div class="form-row">
+        <div class="row">
           <div class="col">
             <label id="samp-description-label">Description</label>
             <TinyMceInline v-model="SampleDescription" aria-labelledby="samp-description-label" />

diff --git a/webapp/src/components/StartingMaterialInformation.vue b/webapp/src/components/StartingMaterialInformation.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container-lg px-5 px-lg-0">
     <!-- Sample information -->
-    <div id="starting-material-information" class="form-row">
+    <div id="starting-material-information" class="row">
       <div class="form-group col-md-2 col-sm-3 col-6">
         <label for="startmat-refcode">Refcode</label>
         <div id="startmat-refcode"><FormattedRefcode :refcode="Refcode" /></div>
@@ -15,7 +15,7 @@
         <StyledInput id="startmat-name" v-model="Name" :readonly="!isEditable" />
       </div>
     </div>
-    <div class="form-row">
+    <div class="row">
       <div class="form-group col-lg-3 col-sm-4">
         <label for="startmat-chemform">Chemical formula</label>
         <ChemFormulaInput v-if="isEditable" id="startmat-chemform" v-model="ChemForm" />
@@ -32,7 +32,7 @@
         <StyledInput id="startmat-purity" v-model="ChemicalPurity" :readonly="!isEditable" />
       </div>
     </div>
-    <div class="form-row">
+    <div class="row">
       <div class="form-group col-lg-3 col-sm-4">
         <label for="startmat-date-acquired">Date acquired</label>
         <StyledInput
@@ -57,7 +57,7 @@
       </div>
     </div>
 
-    <div class="form-row">
+    <div class="row">
       <div class="form-group col-lg-3 col-sm-4">
         <label for="startmat-cas">CAS</label>
         <StyledInput id="startmat-cas" v-model="CAS" :readonly="!isEditable" />

diff --git a/webapp/src/components/datablocks/ChatBlock.vue b/webapp/src/components/datablocks/ChatBlock.vue
@@ -25,12 +25,12 @@ DataBlockBase as a prop, and save from within DataBlockBase  -->
             <label>Current conversation token count:</label>
             <span class="pl-1">{{ tokenCount }}/ {{ modelObj.context_window }}</span>
           </div>
-          <div class="form-row input-group">
+          <div class="row input-group">
             <label>est. cost for next message:</label>
             <span class="pl-1">${{ estimatedCost.toPrecision(2) }}</span>
           </div>
 
-          <div class="form-row input-group">
+          <div class="row input-group">
             <label for="temperatureInput" class="mr-2"><b>temperature:</b></label>
             <input
               id="temperatureInput"

diff --git a/webapp/src/components/datablocks/CycleBlock.vue b/webapp/src/components/datablocks/CycleBlock.vue
@@ -1,6 +1,6 @@
 <template>
   <DataBlockBase :item_id="item_id" :block_id="block_id">
-    <div class="form-row">
+    <div class="row">
       <FileSelectDropdown
         v-model="file_id"
         :item_id="item_id"
@@ -10,7 +10,7 @@
       />
     </div>
     <div v-if="file_id">
-      <div class="form-row">
+      <div class="row">
         <div class="input-group form-inline">
           <label class="mr-2"><b>Cycles to plot:</b></label>
           <input
@@ -37,7 +37,7 @@
         </div>
       </div>
 
-      <div class="form-row mt-2">
+      <div class="row mt-2">
         <div class="input-group form-inline">
           <label class="mr-2"><b>Mode:</b></label>
           <div class="btn-group">

diff --git a/webapp/src/components/datablocks/XRDBlock.vue b/webapp/src/components/datablocks/XRDBlock.vue
@@ -2,7 +2,7 @@
   <!-- think about elegant two-way binding to DataBlockBase... or, just pass all the block data into
 DataBlockBase as a prop, and save from within DataBlockBase  -->
   <DataBlockBase :item_id="item_id" :block_id="block_id">
-    <div class="form-row">
+    <div class="row">
       <FileSelectDropdown
         v-model="file_id"
         :item_id="item_id"
@@ -13,7 +13,7 @@ DataBlockBase as a prop, and save from within DataBlockBase  -->
     </div>
 
     <div v-if="file_id">
-      <div class="form-row col-md-6 col-lg-4 mt-2 mb-2 pl-0">
+      <div class="row col-md-6 col-lg-4 mt-2 mb-2 pl-0">
         <div class="input-group form-inline">
           <label class="mr-2"><b>Wavelength (Å):</b></label>
           <input