From a55c325c0faa77757169161b0aa09377eed4d408 Mon Sep 17 00:00:00 2001 From: Dmytro Chepurnyi Date: Wed, 7 Oct 2015 01:55:08 +0300 Subject: [PATCH] Bootstrap dashboard template integrated http://getbootstrap.com/examples/dashboard/ --- src/components/SmartLink/SmartLink.js | 2 +- src/components/SmartLink/SmartLink.scss | 3 +- src/containers/CoreLayout.js | 60 ++++++--- src/containers/MoviesPage/MoviesPage.js | 161 +++++++++++++++++++++++- src/styles/_base.scss | 117 ++++++++++++++++- src/styles/main.scss | 4 - webpack.config.dev.js | 5 + 7 files changed, 319 insertions(+), 33 deletions(-) diff --git a/src/components/SmartLink/SmartLink.js b/src/components/SmartLink/SmartLink.js index 602592a..7f8df56 100644 --- a/src/components/SmartLink/SmartLink.js +++ b/src/components/SmartLink/SmartLink.js @@ -11,7 +11,7 @@ const mapStateToProps = (state) => ({ routerState: state.router }); class SmartLink extends Component { render() { // Load styles object and use generated class names. - // Sinse the are unique (specified in webpack config) - you can be sure you will not breake global styles + // Sinse the are unique by default (specified in webpack config) - you can be sure you will not breake global styles const styles = require('./SmartLink.scss'); const { title, url, routerState } = this.props; diff --git a/src/components/SmartLink/SmartLink.scss b/src/components/SmartLink/SmartLink.scss index e66bc99..f3db799 100644 --- a/src/components/SmartLink/SmartLink.scss +++ b/src/components/SmartLink/SmartLink.scss @@ -1,5 +1,4 @@ .activeLink{ text-decoration: underline; - color: #4383D8; - font-size: 26px; + font-size: 20px; } \ No newline at end of file diff --git a/src/containers/CoreLayout.js b/src/containers/CoreLayout.js index 496efca..ac95f8b 100644 --- a/src/containers/CoreLayout.js +++ b/src/containers/CoreLayout.js @@ -1,5 +1,4 @@ import React, { Component, PropTypes } from 'react'; -import { Grid, Row, Col, } from 'react-bootstrap'; import { SmartLink } from '../components'; import '../styles/main.scss'; @@ -10,22 +9,51 @@ export default class CoreLayout extends Component { } render() { - return ( - - -

HELLO

- - - -
    - - - + const navTop = () => ( + + ); + + return ( +
    + { navTop() } +
    +
    +
    +
      + + + +
    +
    +
    + {this.props.children} +
    +
    +
    +
    ); } } \ No newline at end of file diff --git a/src/containers/MoviesPage/MoviesPage.js b/src/containers/MoviesPage/MoviesPage.js index 44493af..57cb0ff 100644 --- a/src/containers/MoviesPage/MoviesPage.js +++ b/src/containers/MoviesPage/MoviesPage.js @@ -1,14 +1,163 @@ import React, { Component } from 'react'; -import { Grid, Row } from 'react-bootstrap'; export default class MoviesPage extends Component { render() { return ( - - -

    MOVIES PAGE

    -     -     +
    +

    Dashboard

    + +
    +
    + Generic placeholder thumbnail +

    Label

    + Something else +
    +
    + Generic placeholder thumbnail +

    Label

    + Something else +
    +
    + Generic placeholder thumbnail +

    Label

    + Something else +
    +
    + Generic placeholder thumbnail +

    Label

    + Something else +
    +
    + +

    Section title

    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    #HeaderHeaderHeaderHeader
    1,001Loremipsumdolorsit
    1,002ametconsecteturadipiscingelit
    1,003IntegernecodioPraesent
    1,003liberoSedcursusante
    1,004dapibusdiamSednisi
    1,005Nullaquissemat
    1,006nibhelementumimperdietDuis
    1,007sagittisipsumPraesentmauris
    1,008Fuscenectellussed
    1,009auguesemperportaMauris
    1,010massaVestibulumlaciniaarcu
    1,011egetnullaclassNameaptent
    1,012tacitisociosquadlitora
    1,013torquentperconubianostra
    1,014perinceptoshimenaeosCurabitur
    1,015sodalesligulainlibero
    +
    +
    ); } } \ No newline at end of file diff --git a/src/styles/_base.scss b/src/styles/_base.scss index 25c8334..dd93dbb 100644 --- a/src/styles/_base.scss +++ b/src/styles/_base.scss @@ -1,5 +1,114 @@ // Settings go here -// local class (will be prefixed with hash) -.some-class{ - margin: 10px; -} \ No newline at end of file + +// Base styles taken from 'dashboard.css' +// http://getbootstrap.com/examples/dashboard/ +/* + * Base structure + */ + +// Wrap into global scope. +// Because by default local scope is set and each class have unique name, so we need to avoid this +// if we want our example to look the same as dashboard example +:global { + /* Move down content because we have a fixed navbar that is 50px tall */ + body { + padding-top: 50px; + } + + + /* + * Global add-ons + */ + + .sub-header { + padding-bottom: 10px; + border-bottom: 1px solid #eee; + } + + /* + * Top navigation + * Hide default border to remove 1px line. + */ + .navbar-fixed-top { + border: 0; + } + + /* + * Sidebar + */ + + /* Hide for mobile, show later */ + .sidebar { + display: none; + } + @media (min-width: 768px) { + .sidebar { + position: fixed; + top: 51px; + bottom: 0; + left: 0; + z-index: 1000; + display: block; + padding: 20px; + overflow-x: hidden; + overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ + background-color: #f5f5f5; + border-right: 1px solid #eee; + } + } + + /* Sidebar navigation */ + .nav-sidebar { + margin-right: -21px; /* 20px padding + 1px border */ + margin-bottom: 20px; + margin-left: -20px; + } + .nav-sidebar > li > a { + padding-right: 20px; + padding-left: 20px; + } + .nav-sidebar > .active > a, + .nav-sidebar > .active > a:hover, + .nav-sidebar > .active > a:focus { + color: #fff; + background-color: #428bca; + } + + + /* + * Main content + */ + + .main { + padding: 20px; + } + @media (min-width: 768px) { + .main { + padding-right: 40px; + padding-left: 40px; + } + } + .main .page-header { + margin-top: 0; + } + + + /* + * Placeholder dashboard ideas + */ + + .placeholders { + margin-bottom: 30px; + text-align: center; + } + .placeholders h4 { + margin-bottom: 0; + } + .placeholder { + margin-bottom: 20px; + } + .placeholder img { + display: inline-block; + border-radius: 50%; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 6604d7b..b82391c 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,10 +1,6 @@ @import 'base'; @import 'vendor/normalize'; -//global class - will not have prefix -:global(.some-class){ - padding: 10px; -} body{ background-color: #EEEAF5; } diff --git a/webpack.config.dev.js b/webpack.config.dev.js index 5eaa21e..2ee8d4e 100644 --- a/webpack.config.dev.js +++ b/webpack.config.dev.js @@ -42,6 +42,11 @@ module.exports = { { test: /\.scss$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' + // The query parameter modules enables the CSS Modules spec. (css-loader?modules) + // https://github.com/css-modules/css-modules + // This enables Local scoped CSS by default. (You can switch it off with :global(...) or :global for selectors and/or rules.) + // https://github.com/css-modules/css-modules + // Used without Extract text plugin for reloading purpose // now index.html has "styles.css" entry which is empty in dev mode. But it's ok) // loader: ExtractTextPlugin.extract('style', 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap')