Style fixes for sentences.

src/resources/assets/ts/apps/sentence-inspector/components/FragmentInspector.tsx

@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import React, { Suspense } from 'react';
 
 import { fireEvent } from '@root/components/Component';
@@ -10,6 +9,7 @@ import StaticAlert from '@root/components/StaticAlert';
 import Tengwar from '@root/components/Tengwar';
 import { ISentenceFragmentEntity } from '@root/connectors/backend/IBookApi';
 import GlobalEventConnector from '@root/connectors/GlobalEventConnector';
+import { makeVisibleInViewport } from '@root/utilities/func/visual-focus';
 
 import { IProps } from './FragmentInspector._types';
 
@@ -153,9 +153,9 @@ export default class FragmentInspector extends React.Component<IProps> {
             // sibling is always the selected text.
             const sibling = component.previousElementSibling;
             if (sibling) {
-                sibling.scrollIntoView({
-                    block: 'start',
-                });
+                // -24 is a little offset to ensure that the viewport does not scroll beyond
+                // the element
+                makeVisibleInViewport(sibling, [0, -24]);
             }
         }
     }

src/resources/assets/ts/apps/sentence-inspector/containers/SentenceInspector.scss

@@ -2,19 +2,19 @@
 
 .sentence-inspector {
     font-size: 1.3rem;
+    padding-bottom: 4rem;
 
     .sentence-inspector__introduction {
         font-style: italic;
-        font-size: 0.9rem;
-        text-align: center;
+        font-size: 1rem;
     }
 
     > .p-group {
         padding-bottom: 1rem;
         transition: 0.5s padding;
 
         &.selected {
-            padding-top: 2rem;
+            padding-bottom: 2rem;
         }
 
         > .p-group__p {
@@ -37,7 +37,7 @@
                 text-decoration: none;
 
                 &.selected {
-                    color: #d1305e;
+                    color: $brand-primary;
                     text-shadow: 0px 0px 0.2rem #ddd;
                     font-weight: bold;
                     padding-top: 1rem;
@@ -46,26 +46,4 @@
             }
         }
     }
-
-    @media (min-width: $screen-md-min) {
-        > .p-group {
-            display: flex;
-            padding-bottom: 0;
-
-            > .p-group__p {
-                flex: 1;
-                text-align: left;
-
-                + .p-group__p {
-                    margin-left: 1rem;
-                    margin-top: 0;
-                }
-
-                &.english {
-                    font-size: inherit;
-                    line-height: inherit;
-                }
-            }
-        }
-    }
 }

src/resources/assets/ts/apps/sentence-inspector/containers/SentenceInspector.tsx

@@ -56,12 +56,13 @@ export class SentenceInspector extends React.Component<IProps, IState> {
         }
 
         return <div className="sentence-inspector">
-            <p className="sentence-inspector__introduction">
-                <TextIcon icon="info-sign" />{' '}
-                Click or tap on a word below to learn about the gloss and the grammar
-                rules that apply. The information becomes available at the bottom
-                of the screen.
-            </p>
+            <div className="container">
+                <p className="sentence-inspector__introduction">
+                    Click or tap on a word below to learn about the gloss and the grammar
+                    rules that apply. The information becomes available on the bottom
+                    of the screen.
+                </p>
+            </div>
             <TextInspectorView {...selection}
                 fragmentInspector={this._renderInspector}
                 texts={texts}

src/resources/assets/ts/apps/sentence/index.scss

@@ -0,0 +1,11 @@
+div.abstract {
+    margin-top: 1rem;
+    font-weight: bold;
+    font-style: italic;
+}
+.sentence-footer {
+    text-align: right;
+}
+h3 {
+    text-align: center;
+}

src/resources/assets/ts/apps/sentence/index.ts

@@ -0,0 +1 @@
+import './index.scss';

src/resources/assets/ts/utilities/func/visual-focus.ts

@@ -2,14 +2,28 @@
  * Adjusts the viewport so that the specified DOM element's bounding box is within it and visible.
  * @param domElement
  */
-export const makeVisibleInViewport = (domElement: any) => {
+export const makeVisibleInViewport = (domElement: Element, offsetsXY: [number, number] = null) => {
     if (! domElement) {
         return;
     }
 
     requestAnimationFrame(() => {
-        domElement.scrollIntoView({
-            block: 'start',
-        });
+        if (offsetsXY === null) {
+            domElement.scrollIntoView({
+                block: 'start',
+                behavior: 'smooth',
+            });
+        } else {
+            // This is an alternate implementation intended to support X and Y offsets. Offsets are
+            // not currently supported by `scrollIntoView`.
+            const rect = domElement.getBoundingClientRect();
+            const y = rect.top + window.pageYOffset + (offsetsXY[1] || 0);
+            const x = rect.left + window.pageXOffset + (offsetsXY[0] || 0);
+            window.scrollTo({
+                left: x,
+                top: y,
+                behavior: 'smooth',
+            });
+        }
     });
 };

src/resources/views/sentence/public/sentence.blade.php

@@ -11,22 +11,24 @@
     @include('_shared._neologism', ['account' => $sentence['sentence']->account])
   @endif
 
-  <header>
-    @include('sentence.public._header')
-    <h2>{{ $sentence['sentence']->name }}</h2>
-  </header>
+  <div class="container">
+    <header>
+      @include('sentence.public._header')
+      <h2>{{ $sentence['sentence']->name }}</h2>
+    </header>
 
-  @if (!empty($sentence['sentence']->description))
-  <div class="abstract">
-    @markdown($sentence['sentence']->description)
-  </div>
-  @endif
+    @if (!empty($sentence['sentence']->description))
+    <div class="abstract">
+      @markdown($sentence['sentence']->description)
+    </div>
+    @endif
 
-  @if (! empty($sentence['sentence']->long_description))
-  <div class="long-text-body">
-    @markdown($sentence['sentence']->long_description)
+    @if (! empty($sentence['sentence']->long_description))
+    <div class="long-text-body">
+      @markdown($sentence['sentence']->long_description)
+    </div>
+    @endif
   </div>
-  @endif
 
   <div id="ed-fragment-navigator" data-inject-module="sentence-inspector" data-inject-prop-sentence="{{ json_encode($sentence) }}"></div>
 
@@ -46,6 +48,7 @@
   @endif  
 
   <footer class="sentence-footer">
+    &mdash;
     Source [{{ $sentence['sentence']->source }}]. 
     Published <span class="date">{{ $sentence['sentence']->created_at }}</span>
     @if ($sentence['sentence']->updated_at)
@@ -66,5 +69,5 @@
 @endsection
 
 @section('styles')
-  <link href="@assetpath(/css/app.sentence.css)" rel="stylesheet">
+  <link href="@assetpath(style-sentence.css)" rel="stylesheet">
 @endsection

src/resources/views/sentence/public/sentences.blade.php

@@ -63,6 +63,3 @@
     </div>
   @endif
 @endsection
-@section('styles')
-  <link href="@assetpath(/css/app.sentences.css)" rel="stylesheet">
-@endsection

src/webpack.config.js

@@ -20,6 +20,7 @@ module.exports = {
     'style-auth': `${sourcePath}/apps/auth/index.scss`,
     'style-dashboard': `${sourcePath}/apps/dashboard/index.scss`,
     'style-timeline': `${sourcePath}/apps/timeline/index.scss`,
+    'style-sentence': `${sourcePath}/apps/sentence/index.scss`,
   },
   output: {
     filename: '[name].js',