new table form html, css

resources/assets/js/app.js

@@ -7,6 +7,13 @@
 
 require('./bootstrap');
 
+$(function () {
+    $('[data-toggle="tooltip"]').tooltip({
+      container: 'body'
+    })
+})
+
+
 //
 // window.Vue = require('vue');
 //

resources/assets/sass/_bst-modules.scss

@@ -25,8 +25,8 @@
 @import "~bootstrap/scss/list-group";
 @import "~bootstrap/scss/close";
 @import "~bootstrap/scss/modal";
-//@import "~bootstrap/scss/tooltip";
-//@import "~bootstrap/scss/popover";
+@import "~bootstrap/scss/tooltip";
+@import "~bootstrap/scss/popover";
 //@import "~bootstrap/scss/carousel";
 @import "~bootstrap/scss/utilities";
 //@import "~bootstrap/scss/print";

resources/assets/sass/_variables.scss

@@ -19,3 +19,7 @@ $card-border-radius: 5px;
 $card-inner-border-radius: 2px;
 
 $list-group-hover-bg: rgba($primary, .1);
+
+$tooltip-max-width: 300px;
+$tooltip-bg: darken($primary, 20%);
+$tooltip-arrow-color: $tooltip-bg;

resources/assets/sass/app.scss

@@ -7,6 +7,18 @@
 @import "variables";
 @import "bst-modules";
 
+html {
+	overflow-y: scroll;
+}
+
+.tooltip-inner {
+	text-align: left;
+}
+
+.tooltip-inner {
+	box-shadow: 0 2px 5px rgba(black, .3);
+}
+
 .page-navbar {
 	background: white;
 	border-bottom: 1px solid $primary;

resources/views/form/_help.blade.php

@@ -0,0 +1,11 @@
+<div class="col-md-1 pl-0">
+  @if($w->help)
+    <i class="fa-question-circle"
+       data-toggle="tooltip"
+       data-placement="right"
+       @if(false!==strpos($w->help, '<'))
+       data-html="true"
+       @endif
+       title="{{ $w->help }}"></i>
+  @endif
+</div>

resources/views/form/input.blade.php

@@ -0,0 +1,21 @@
+@php
+/** @var \App\View\Widget $w */
+@endphp
+
+<div class="row form-group">
+  <label for="field-{{ $w->name }}" class="col-md-3 col-form-label text-md-right">{{ $w->label }}</label>
+  <div class="col-md-8 pl-0">
+    <input id="field-{{ $w->name }}"
+           name="{{ $w->name }}"
+           class="form-control{{ $errors->has($w->name) ? ' is-invalid' : '' }}"
+           value="{{ $w->value }}"
+           {!! $w->attributes !!}>
+
+    @if ($errors->has($w->name))
+      <span class="invalid-feedback" role="alert">
+        <strong>{{ $errors->first($w->name) }}</strong>
+      </span>
+    @endif
+  </div>
+  @include('form._help')
+</div>

resources/views/form/textarea.blade.php

@@ -0,0 +1,20 @@
+@php
+/** @var \App\View\Widget $w */
+@endphp
+
+<div class="row form-group">
+  <label for="field-{{ $w->name }}" class="col-md-3 col-form-label text-md-right">{{ $w->label }}</label>
+  <div class="col-md-8 pl-0">
+    <textarea id="field-{{ $w->name }}"
+              name="{{ $w->name }}"
+              class="form-control{{ $errors->has($w->name) ? ' is-invalid' : '' }}"
+              {!! $w->attributes !!}>{{$w->value}}</textarea>
+
+    @if ($errors->has($w->name))
+      <span class="invalid-feedback" role="alert">
+        <strong>{{ $errors->first($w->name) }}</strong>
+      </span>
+    @endif
+  </div>
+  @include('form._help')
+</div>

resources/views/table/create.blade.php

@@ -2,92 +2,49 @@
 
 @section('content')
   <div class="container">
-    <div class="row justify-content-center">
+    <form method="POST" action="{{route('table.storeNew')}}" class="row justify-content-center">
+      <h2>New Table</h2>
+
+      @csrf
       <div class="col-md-8">
-        <div class="row form-group">
-          <label for="table-name" class="col-md-3 col-form-label text-md-right">Title</label>
-          <input id="table-name" name="table-name" class="form-control col-md-8" value="{{old('table-name')}}">
+        {!! Widget::text('table-name', 'Title')->help('Unique among your tables') !!}
 
-          @if ($errors->has('table-name'))
-            <span class="invalid-feedback" role="alert">
-              <strong>{{ $errors->first('table-name') }}</strong>
-            </span>
-          @endif
-        </div>
+        {!! Widget::textarea('table-descr', 'Description')->height('8em')
+              ->help('Description what data is in the table. Please use the dedicated
+                fields for License and data source. URLs in a full format will be clickable.') !!}
+
+        {!! Widget::text('license', 'License')
+              ->help('License applicable to the table\'s data, if any. By default, all
+                tables are CC0 or Public Domain.') !!}
+
+        {!! Widget::text('upstream', 'Adapted from')
+              ->help('If you took the data from some external site, a book, etc., write it here.
+                 URLs in a full format will be clickable.') !!}
+
+        {!! Widget::textarea('col-spec', 'Columns')->value($exampleColSpec)->height('8em')
+              ->help('
+                <div class="text-left">
+                Column parameters in CSV format:
+                <ul class="pl-3 mb-0">
+                  <li><b>column identifier</b><br>letters, numbers, underscore
+                  <li><b>column data type</b><br>int, string, float, bool
+                  <li><b>column title</b><br>used for display (optional)
+                </ul>
+                </div>') !!}
+
+        {!! Widget::textarea('row-data', 'Initial data')->value($exampleData)->height('12em')
+              ->help('
+                Initial table data in CSV format, columns corresponding to the
+                specification you entered above.') !!}
 
         <div class="row form-group">
-          <label for="table-descr" class="col-md-3 col-form-label text-md-right">Description</label>
-          <textarea id="table-descr" name="table-descr" class="form-control col-md-8" style="height: 6em">{{--
-            --}}{{old('table-descr')}}{{--
-          --}}</textarea>
-
-          @if ($errors->has('table-descr'))
-            <span class="invalid-feedback" role="alert">
-              <strong>{{ $errors->first('table-descr') }}</strong>
-            </span>
-          @endif
-        </div>
-
-        <div class="row form-group">
-          <label for="license" class="col-md-3 col-form-label text-md-right">License</label>
-          <input id="license" name="license" class="form-control col-md-8" value="{{old('license')}}">
-
-          @if ($errors->has('license'))
-            <span class="invalid-feedback" role="alert">
-              <strong>{{ $errors->first('license', 'CC0') }}</strong>
-            </span>
-          @endif
-        </div>
-
-        <div class="row form-group">
-          <label for="upstream" class="col-md-3 col-form-label text-md-right">Adapted from</label>
-          <input id="upstream" name="upstream" class="form-control col-md-8" value="{{old('upstream')}}">
-
-          @if ($errors->has('upstream'))
-            <span class="invalid-feedback" role="alert">
-              <strong>{{ $errors->first('upstream') }}</strong>
-            </span>
-          @endif
-        </div>
-
-        <div class="row">
-          <div class="col-md-3"></div>
-          <div class="col-md-8">
-            <p>Insert the initial table definition and data in CSV format. Columns are defined as CSV rows:</p>
-            <ul>
-              <li>type (int, string, float, bool)
-              <li>column identifier (letters, numbers, and underscore only)
-              <li>user-friendly column title
-            </ul>
+          <div class="col-md-8 offset-md-3 pl-0">
+            <button type="submit" class="btn btn-primary">
+              <i class="fa-save pr-2"></i>Create New Table
+            </button>
           </div>
         </div>
-
-        <div class="row form-group">
-          <label for="col-spec" class="col-md-3 col-form-label text-md-right">Columns specification</label>
-          <textarea id="col-spec" name="col-spec" class="form-control col-md-8" style="height: 6em">{{--
-            --}}{{old('col-spec', $exampleColSpec)}}{{--
-          --}}</textarea>
-
-          @if ($errors->has('col-spec'))
-            <span class="invalid-feedback" role="alert">
-              <strong>{{ $errors->first('col-spec') }}</strong>
-            </span>
-          @endif
-        </div>
-
-        <div class="row">
-          <label for="row-data" class="col-md-3 col-form-label text-md-right">Initial data</label>
-          <textarea id="row-data" name="row-data" class="form-control col-md-8" style="height: 16em">{{--
-            --}}{{old('row-data', $exampleData)}}{{--
-          --}}</textarea>
-
-          @if ($errors->has('row-data'))
-            <span class="invalid-feedback" role="alert">
-              <strong>{{ $errors->first('row-data') }}</strong>
-            </span>
-          @endif
-        </div>
       </div>
-    </div>
+    </form>
   </div>
 @endsection