Nicer disclosure UI for optional data

Signed-off-by: snipe <snipe@snipe.net>

public/css/build/app.css

@@ -1453,7 +1453,11 @@ legend.highlight {
   background: repeating-linear-gradient(45deg, #222d32, #222d32 10px, #444 10px, #444 11px);
   color: #fff;
   font-size: 18px;
-  padding: 6px;
+  padding: 6px 6px 6px 10px;
+}
+legend.highlight a {
+  color: #fff;
+  cursor: pointer;
 }
 fieldset.bottom-padded {
   padding-bottom: 20px;

public/css/build/overrides.css

@@ -1074,7 +1074,11 @@ legend.highlight {
   background: repeating-linear-gradient(45deg, #222d32, #222d32 10px, #444 10px, #444 11px);
   color: #fff;
   font-size: 18px;
-  padding: 6px;
+  padding: 6px 6px 6px 10px;
+}
+legend.highlight a {
+  color: #fff;
+  cursor: pointer;
 }
 fieldset.bottom-padded {
   padding-bottom: 20px;

public/css/dist/all.css

@@ -22788,7 +22788,11 @@ legend.highlight {
   background: repeating-linear-gradient(45deg, #222d32, #222d32 10px, #444 10px, #444 11px);
   color: #fff;
   font-size: 18px;
-  padding: 6px;
+  padding: 6px 6px 6px 10px;
+}
+legend.highlight a {
+  color: #fff;
+  cursor: pointer;
 }
 fieldset.bottom-padded {
   padding-bottom: 20px;
@@ -24357,7 +24361,11 @@ legend.highlight {
   background: repeating-linear-gradient(45deg, #222d32, #222d32 10px, #444 10px, #444 11px);
   color: #fff;
   font-size: 18px;
-  padding: 6px;
+  padding: 6px 6px 6px 10px;
+}
+legend.highlight a {
+  color: #fff;
+  cursor: pointer;
 }
 fieldset.bottom-padded {
   padding-bottom: 20px;

public/mix-manifest.json

@@ -2,8 +2,8 @@
     "/js/build/app.js": "/js/build/app.js?id=19253af36b58ed3fb6770c7bb944f079",
     "/css/dist/skins/skin-black-dark.css": "/css/dist/skins/skin-black-dark.css?id=06c13e817cc022028b3f4a33c0ca303a",
     "/css/dist/skins/_all-skins.css": "/css/dist/skins/_all-skins.css?id=79aa889a1a6691013be6c342ca7391cd",
-    "/css/build/overrides.css": "/css/build/overrides.css?id=a51d8ac1d0948606bf6bd2fb06118cf0",
+    "/css/build/overrides.css": "/css/build/overrides.css?id=2bfc7b71d951c5ac026dbc034f7373b1",
-    "/css/build/app.css": "/css/build/app.css?id=b9970ad4ec56f54702fd07be6ee5dd21",
+    "/css/build/app.css": "/css/build/app.css?id=4b4c2f1225d59efa7a22b76f7bbe39d8",
     "/css/build/AdminLTE.css": "/css/build/AdminLTE.css?id=4ea0068716c1bb2434d87a16d51b98c9",
     "/css/dist/skins/skin-yellow.css": "/css/dist/skins/skin-yellow.css?id=7b315b9612b8fde8f9c5b0ddb6bba690",
     "/css/dist/skins/skin-yellow-dark.css": "/css/dist/skins/skin-yellow-dark.css?id=ea22079836a432d7f46a5d390c445e13",
@@ -19,7 +19,7 @@
     "/css/dist/skins/skin-blue.css": "/css/dist/skins/skin-blue.css?id=a82b065847bf3cd5d713c04ee8dc86c6",
     "/css/dist/skins/skin-blue-dark.css": "/css/dist/skins/skin-blue-dark.css?id=6ea836d8126de101081c49abbdb89417",
     "/css/dist/skins/skin-black.css": "/css/dist/skins/skin-black.css?id=76482123f6c70e866d6b971ba91de7bb",
-    "/css/dist/all.css": "/css/dist/all.css?id=84aee73038982c2f8a4a09c658b3559e",
+    "/css/dist/all.css": "/css/dist/all.css?id=12e96a25d0dc3ee39e9d3ce97044fbbf",
     "/css/dist/signature-pad.css": "/css/dist/signature-pad.css?id=6a89d3cd901305e66ced1cf5f13147f7",
     "/css/dist/signature-pad.min.css": "/css/dist/signature-pad.min.css?id=6a89d3cd901305e66ced1cf5f13147f7",
     "/js/select2/i18n/af.js": "/js/select2/i18n/af.js?id=4f6fcd73488ce79fae1b7a90aceaecde",

resources/assets/less/overrides.less

@@ -1199,7 +1199,12 @@ legend.highlight {
 
   color: #fff;
   font-size: 18px;
-  padding: 6px;
+  padding: 6px 6px 6px 10px;
+}
+
+legend.highlight a {
+  color: #fff;
+  cursor: pointer;
 }
 
 fieldset.bottom-padded {

resources/views/hardware/edit.blade.php

@@ -99,20 +99,19 @@
         @endif
     </div>
 
-    <div class="form-group">
-    <label class="col-md-3 control-label"></label>
 
-        <div class="col-md-9 col-sm-9 col-md-offset-3">
+        <div class="col-md-12 col-sm-12">
 
-        <a id="optional_info" class="text-primary">
+        <fieldset name="optional-details">
-            <x-icon type="caret-right" class="fa-2x" id="optional_info_icon" />
+
-            <strong>{{ trans('admin/hardware/form.optional_infos') }}</strong>
+            <legend class="highlight">
+                <a id="optional_info">
+                    <x-icon type="caret-right" id="optional_info_icon" />
+                    {{ trans('admin/hardware/form.optional_infos') }}
                 </a>
-
+            </legend>
-        </div>
 
             <div id="optional_details" class="col-md-12" style="display:none">
-        <br>
                 @include ('partials.forms.edit.name', ['translated_name' => trans('admin/hardware/form.name')])
                 @include ('partials.forms.edit.warranty')
 
@@ -143,26 +142,30 @@
                         <label class="form-control">
                             <input type="checkbox" value="1" name="byod" {{ (old('remote', $item->byod)) == '1' ? ' checked="checked"' : '' }} aria-label="byod">
                             {{ trans('general.byod') }}
-
                         </label>
-                    <p class="help-block">{{ trans('general.byod_help') }}
+                        <p class="help-block">
+                            {{ trans('general.byod_help') }}
                         </p>
                     </div>
                 </div>
-        </div>
-    </div>
 
-    <div class="form-group">
+            </div> <!-- end optional details -->
-        <div class="col-md-9 col-sm-9 col-md-offset-3">
+        </fieldset>
-            <a id="order_info" class="text-primary">
+
-                <x-icon type="caret-right" class="fa-2x" id="order_info_icon" />
+        </div><!-- end col-md-12 col-sm-12-->
-                <strong>{{ trans('admin/hardware/form.order_details') }}</strong>
+
+
+
+        <div class="col-md-12 col-sm-12">
+            <fieldset name="order-info">
+                <legend class="highlight">
+                    <a id="order_info">
+                        <x-icon type="caret-right" id="order_info_icon" />
+                        {{ trans('admin/hardware/form.order_details') }}
                     </a>
-
+                </legend>
-        </div>
 
                 <div id='order_details' class="col-md-12" style="display:none">
-            <br>
                     @include ('partials.forms.edit.order_number')
                     @include ('partials.forms.edit.purchase_date')
                     @include ('partials.forms.edit.eol_date')
@@ -177,8 +180,11 @@
 
                     @include ('partials.forms.edit.purchase_cost', ['currency_type' => $currency_type])
 
-        </div>
+                </div> <!-- end order details -->
-    </div>
+            </fieldset>
+        </div><!-- end col-md-12 col-sm-12-->
+    </div><!-- end col-md-12 col-sm-12-->
+    </div><!-- end col-md-12 col-sm-12-->
    
 @stop
 

resources/views/models/custom_fields_form.blade.php

@@ -1,4 +1,10 @@
 @if (($model) && ($model->fieldset))
+    <div class="col-md-12 col-sm-12">
+    <fieldset name="custom-fields" class="bottom-padded">
+        <legend class="highlight">
+            {{ trans('admin/custom_fields/general.custom_fields') }}
+        </legend>
+
   @foreach($model->fieldset->fields AS $field)
       @if (
     ((!isset($show_display_checkin_fields))
@@ -10,7 +16,12 @@
         )
 
     <div class="form-group{{ $errors->has($field->db_column_name()) ? ' has-error' : '' }}">
-      <label for="{{ $field->db_column_name() }}" class="col-md-3 control-label">{{ $field->name }} </label>
+
+
+      <label for="{{ $field->db_column_name() }}" class="col-md-3 control-label">
+          {{ $field->name }}
+      </label>
+
       <div class="col-md-7 col-sm-12">
 
           @if ($field->element!='text')
@@ -98,6 +109,8 @@
     </div>
     @endif
   @endforeach
+    </fieldset>
+    </div>
 @endif
 
 

resources/views/users/edit.blade.php

@@ -274,19 +274,22 @@
 
 
                   <!-- begin optional disclosure arrow stuff -->
-                  <div class="form-group">
-                      <label class="col-md-3 control-label"></label>
 
-                      <div class="col-md-9 col-sm-9 col-md-offset-3">
+                      <div class="col-md-12">
 
-                          <a id="optional_user_info" class="text-primary">
+                      <fieldset name="optional-details">
-                              <i class="fa fa-caret-right fa-2x" id="optional_user_info_icon"></i>
+
-                              <strong>{{ trans('admin/hardware/form.optional_infos') }}</strong>
+                          <legend class="highlight">
+                              <a id="optional_user_info">
+                                  <x-icon type="caret-right" id="optional_user_info_icon" />
+                                  {{ trans('admin/hardware/form.optional_infos') }}
                               </a>
-
+                          </legend>
-                      </div>
 
                           <div id="optional_user_details" class="col-md-12" style="display:none">
+
+
+
                               <!-- everything here should be what is considered optional -->
                               <br>
                               <!-- Company -->
@@ -557,8 +560,9 @@
                                   </div>
                               </div>
                           </div>
-                  </div>
 
+                    </fieldset>
+                      </div>