Reorganize styles and DetailsSection menu code

src/components/display/DictionaryDetails/DetailsSection/index.jsx

@@ -3,6 +3,8 @@ import Component from 'inferno-component';
 import marked from 'marked';
 import sanitizeHtml from 'sanitize-html';
 
+import './styles.scss';
+
 import { PhonologyDisplay } from './PhonologyDisplay';
 
 const DISPLAY = {
@@ -32,35 +34,7 @@ export class DetailsSection extends Component {
     });
   }
 
-  displayDetails () {
-    const { currentDisplay } = this.state;
-    const { details } = this.props;
-    const defaultMenuLength = this.defaultMenuItems.length;
-
-    if (currentDisplay < defaultMenuLength) {
-      switch (this.defaultMenuItems[currentDisplay]) {
-        case 'Phonology': {
-          return <PhonologyDisplay phonologyContent={details.phonology} />
-          break;
-        }
-        case 'Grammar': {
-          return 'Grammar content!';
-          break;
-        }
-      }
-    } else {
-      const sanitizedCustomTabContent = sanitizeHtml(details.custom[currentDisplay - defaultMenuLength].content);
-      return (
-        <div className='content'>
-          <div dangerouslySetInnerHTML={{
-            __html: marked(sanitizedCustomTabContent),
-          }} />
-        </div>
-      );
-    }
-  }
-
-  render () {
+  displayMenu () {
     const { details } = this.props;
 
     let additionalMenu = (
@@ -87,8 +61,8 @@ export class DetailsSection extends Component {
       </div>
     );
 
-    const menu = (
-      <div className='menu'>
+    return (
+      <div className='details-menu'>
         <p className='menu-label'>
           Linguistics
         </p>
@@ -110,11 +84,49 @@ export class DetailsSection extends Component {
 
       </div>
     );
+  }
 
+  displayDetails () {
+    const { currentDisplay } = this.state;
+    const { details } = this.props;
+    const defaultMenuLength = this.defaultMenuItems.length;
+
+    let detailsDisplay = '';
+
+    if (currentDisplay < defaultMenuLength) {
+      switch (this.defaultMenuItems[currentDisplay]) {
+        case 'Phonology': {
+          detailsDisplay = <PhonologyDisplay phonologyContent={details.phonology} />
+          break;
+        }
+        case 'Grammar': {
+          detailsDisplay = 'Grammar content!';
+          break;
+        }
+      }
+    } else {
+      const sanitizedCustomTabContent = sanitizeHtml(details.custom[currentDisplay - defaultMenuLength].content);
+      detailsDisplay = (
+        <div className='content'>
+          <div dangerouslySetInnerHTML={{
+            __html: marked(sanitizedCustomTabContent),
+          }} />
+        </div>
+      );
+    }
+
+    return (
+      <div className='details-display'>
+        { detailsDisplay }
+      </div>
+    );
+  }
+
+  render () {
     return (
       <div className='columns'>
         <aside className='column is-one-quarter'>
-          { menu }
+          { this.displayMenu() }
         </aside>
         <div className='column'>
           { this.displayDetails() }

src/components/display/DictionaryDetails/DetailsSection/styles.scss

@@ -0,0 +1,11 @@
+@import '../../../../../node_modules/bulma/bulma';
+
+.details-menu {
+  @extend .menu;
+}
+
+.details-menu,
+.details-display {
+  max-height: 500px;
+  overflow-y: auto;
+}

src/components/display/DictionaryDetails/index.jsx

@@ -3,6 +3,8 @@ import Component from 'inferno-component';
 import marked from 'marked';
 import sanitizeHtml from 'sanitize-html';
 
+import './styles.scss';
+
 import { EditDictionaryModal } from '../../management/EditDictionaryModal';
 import { DetailsSection } from './DetailsSection';
 
@@ -76,7 +78,7 @@ export class DictionaryDetails extends Component {
       }
 
       return (
-        <div className='box'>
+        <div className='details-box'>
           { displayJSX }
         </div>
       )

src/components/display/DictionaryDetails/styles.scss

@@ -0,0 +1,5 @@
+@import '../../../../node_modules/bulma/bulma';
+
+.details-box {
+  @extend .box;
+}

src/components/management/SearchBox/index.jsx

@@ -1,6 +1,8 @@
 import Inferno from 'inferno';
 import Component from 'inferno-component';
 
+import './styles.scss';
+
 import Helper from '../../../Helper';
 
 import dictionary from '../../../managers/DictionaryData';
@@ -249,7 +251,7 @@ export class SearchBox extends Component {
       <div>
         <div className='field has-addons is-hidden-touch'>
           <p className='control'>
-            <input className='input' type='text' readonly={ true }
+            <input className='open-search-input' type='text' readonly={ true }
               value={ this.state.searchTerm }
               onClick={ this.showHeader.bind(this) } />
           </p>

src/components/management/SearchBox/styles.scss

@@ -0,0 +1,25 @@
+@import '../../../../node_modules/bulma/bulma';
+
+.open-search-input {
+  @extend .input;
+  cursor: pointer;
+}
+
+.search-bar {
+  @extend .hero;
+  background: transparent;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+
+  .search-body {
+    @extend .hero-body;
+    @extend .is-paddingless;
+
+    .search-background {
+      @extend .modal-background;
+    }
+  }
+}

src/sass/_styles.scss

@@ -1,33 +1,6 @@
 @import 'variables';
 @import '../../node_modules/bulma/bulma';
 
-.input {
-  &[readonly] {
-    &.is-clickable {
-      cursor: pointer;
-    }
-  }
-}
-
-.search-bar {
-	@extend .hero;
-  background: transparent;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 100;
-
-  .search-body {
-    @extend .hero-body;
-    @extend .is-paddingless;
-
-    .search-background {
-      @extend .modal-background;
-    }
-  }
-}
-
 .modal-card-title {
   word-wrap: break-word;
   max-width: 100%;