Layout restyled using flex

Bundle/WebBundle/Resources/public/js/views/component/Notification.js

@@ -38,11 +38,11 @@ export default React.createClass({
 
     return (
       <div className={classes}>
-        <div className="notification-icon">
+        <div className="notification__icon">
           <i className="fa fa-exclamation-circle"></i>
         </div>
-        <p className="notification-message">{this.props.message}</p>
-        <i className="notification-hide fa fa-times"
+        <p className="notification__message">{this.props.message}</p>
+        <i className="notification__hide fa fa-times"
            onClick={this.onCloseClick}></i>
       </div>
     );

Bundle/WebBundle/Resources/public/js/views/layout/Base.js

@@ -8,6 +8,8 @@
  * file that was distributed with this source code.
  */
 
+import '../../../scss/layout/_base.scss';
+
 import React from 'react';
 
 import ContentLayout from './ContentLayout.js';
@@ -18,7 +20,7 @@ export default React.createClass({
 
   render() {
     return (
-      <div>
+      <div className="base-layout">
         <NotificationLayout/>
         <MainMenu/>
         <ContentLayout>

Bundle/WebBundle/Resources/public/js/views/layout/ContentLayout.js

@@ -15,7 +15,7 @@ import React from 'react';
 export default React.createClass({
   render() {
     return (
-      <div id="content">
+      <div className="content">
         {this.props.children}
       </div>
     );

Bundle/WebBundle/Resources/public/js/views/layout/ContentMiddleLayout.js

@@ -28,7 +28,9 @@ export default React.createClass({
 
     return (
       <div className={classes}>
-        {this.props.children}
+        <div className="content__middle-content">
+          {this.props.children}
+        </div>
       </div>
     );
   }

Bundle/WebBundle/Resources/public/js/views/layout/ContentRightLayout.js

@@ -22,7 +22,9 @@ export default React.createClass({
     });
     return (
       <div className={classes}>
-        {this.props.children}
+        <div className="content__right-content">
+          {this.props.children}
+        </div>
       </div>
     );
   }

Bundle/WebBundle/Resources/public/js/views/layout/NotificationLayout.js

@@ -8,6 +8,8 @@
  * file that was distributed with this source code.
  */
 
+import '../../../scss/layout/_notification.scss';
+
 import React from 'react';
 
 import Notification from '../component/Notification.js';

Bundle/WebBundle/Resources/public/scss/components/_notification.scss

@@ -16,7 +16,6 @@ $notification-height: 50px !default;
   color: $white;
   display: flex;
   height: 0;
-  margin-left: 80px;
   overflow: hidden;
   transition-duration: .5s;
 }
@@ -29,7 +28,7 @@ $notification-height: 50px !default;
   background: $main-red;
 }
 
-.notification-icon {
+.notification__icon {
   background: rgba($main-black, .2);
   height: $notification-height;
   line-height: $notification-height;
@@ -38,11 +37,11 @@ $notification-height: 50px !default;
   width: $notification-height;
 }
 
-.notification-message {
+.notification__message {
   flex: 1;
 }
 
-.notification-hide {
+.notification__hide {
   cursor: pointer;
   margin: 0 .5em;
 }

Bundle/WebBundle/Resources/public/scss/layout/_base.scss

@@ -0,0 +1,13 @@
+// This file is part of the Kreta package.
+//
+// (c) Beñat Espiña <[email protected]>
+// (c) Gorka Laucirica <[email protected]>
+//
+// For the full copyright and license information, please view the LICENSE
+// file that was distributed with this source code.
+
+.base-layout {
+  display: flex;
+  flex-flow: row wrap;
+  height: 100vh;
+}

Bundle/WebBundle/Resources/public/scss/layout/_content.scss

@@ -5,41 +5,47 @@
 //
 // For the full copyright and license information, please view the LICENSE
 // file that was distributed with this source code.
-
 @import '../../scss/base/colors';
 
 $content-width: 900px;
 $content-right-width: 450px;
 $content-transition: .3s;
 
 .content {
-  width: 100%;
+  flex: 1;
+
+  > div {
+    display: flex;
+    height: 100vh;
+  }
 }
 
 .content__middle {
-  margin-left: 90px;
-  padding: 20px calc(50% - #{$content-width / 2});
+  flex: 1;
+  overflow-y: scroll;
   transition-duration: $content-transition;
 }
 
-.content__middle--right-open {
-  padding: 20px calc(50% - #{$content-width / 2} + #{$content-right-width / 2})
-           20px calc(50% - #{$content-width / 2} - #{$content-right-width / 2});
+.content__middle-content {
+  max-width: $content-width;
+  margin: auto;
+  width: 100%;
 }
 
 .content__right {
   background-color: $light-grey;
   border-left: 1px solid $main-grey;
-  bottom: 0;
   box-sizing: border-box;
-  padding: 20px;
-  position: fixed;
-  right: -$content-right-width;
-  top: 0;
-  transition: right $content-transition;
-  width: $content-right-width;
+  overflow-y: scroll;
+  transition: width $content-transition;
+  width: 0;
 }
 
 .content__right--visible {
-  right: 0;
+  width: $content-right-width;
+}
+
+.content__right-content {
+  padding: 20px;
+  width: $content-right-width;
 }

Bundle/WebBundle/Resources/public/scss/layout/_main-menu.scss

@@ -12,13 +12,9 @@
   background: $grey;
   color: $white;
   height: 100%;
-  left: 0;
   padding: 5px;
-  position: fixed;
   text-align: center;
-  top: 0;
   width: 80px;
-  z-index: 30;
 }
 
 .menu-logo {

Bundle/WebBundle/Resources/public/scss/layout/_notification.scss

@@ -0,0 +1,11 @@
+// This file is part of the Kreta package.
+//
+// (c) Beñat Espiña <[email protected]>
+// (c) Gorka Laucirica <[email protected]>
+//
+// For the full copyright and license information, please view the LICENSE
+// file that was distributed with this source code.
+
+.notification-layout {
+  width: 100%;
+}

Bundle/WebBundle/Resources/public/scss/views/page/issue/_new.scss

@@ -8,12 +8,6 @@
 
 @import '../../../base/colors';
 
-.issue-new {
-  padding-top: 100px;
-  position: relative;
-  width: 100%;
-}
-
 .issue-new__details {
   border-top: 1px solid $main-grey;
   display: flex;