Desktop design

Author: isdenmois

dev-tools/webpack/webpack.config.dev.coffee

@@ -16,6 +16,7 @@ dllDepPath = path.resolve(dllPath, 'fibookDeps.dll.js')
 
 exports.context = APP_PATH
 exports.devtool = 'source-map'
+exports.mode = 'development'
 
 exports.entry = [
     'webpack-hot-middleware/client'

src/components/List.tsx

@@ -4,7 +4,7 @@ const s = require('./style/list.css')
 
 interface Props {
   empty?: JSX.Element
-  noBorder?: boolean
+  strong?: boolean
 }
 
 export default class List extends React.PureComponent<Props> {
@@ -13,7 +13,7 @@ export default class List extends React.PureComponent<Props> {
       return this.props.empty
     }
 
-    const className = this.props.noBorder ? `${s.list} ${s.noBorder}` : s.list
+    const className = this.props.strong ? `${s.list} ${s.strong}` : s.list
 
     return (
       <div className={className}>

src/components/Page.tsx

@@ -11,6 +11,7 @@ interface Props {
   fixed?: React.ReactNode
   tabs?: TabData[]
   shadow?: boolean
+  tabsTop?: boolean
 }
 
 interface State {
@@ -35,6 +36,9 @@ export default class Page extends React.PureComponent<Props> {
     if (this.props.shadow) {
       className = `${className} ${s.shadow}`
     }
+    if (this.props.tabsTop) {
+      className = `${className} ${s.tabsTop}`
+    }
 
     return (
       <div className={className} data-page={this.props.name}>

src/components/Tabs.tsx

@@ -24,7 +24,7 @@ export default class Tabs extends React.PureComponent<Props> {
     const tab = this.props.data[active]
 
     return (
-      <Page shadow name={this.props.name} tabbar={map(this.props.data, this.renderButton)} fixed={tab.fixed}>
+      <Page shadow tabsTop name={this.props.name} tabbar={map(this.props.data, this.renderButton)} fixed={tab.fixed}>
         {map(this.props.data, this.renderTab)}
       </Page>
     )

src/components/Toolbar.tsx

@@ -4,6 +4,7 @@ const { withRouter } = require('react-router')
 
 const s = require('./style/toolbar.css')
 const svg = require('./style/ios-arrow-back.svg')
+const close = require('./style/close.svg')
 
 interface Props {
   title: React.ReactNode
@@ -23,6 +24,11 @@ export default class Toolbar extends React.PureComponent<Props> {
           </div>
         }
         <div className={s.title}>{this.props.title}</div>
+        {this.props.backButton &&
+          <div className={s.closeButton} onClick={this.goBack}>
+            <InlineSVG src={close}/>
+          </div>
+        }
       </div>
     )
   }

src/components/style/button.css

@@ -11,6 +11,10 @@
     text-align: center;
 }
 
+.wrapper:hover {
+    opacity: 0.7;
+}
+
 .wrapper:active {
     color: white;
     background-color: var(--blue);

src/components/style/close.svg

@@ -33,3 +33,19 @@
     top: 0;
     left: 0;
 }
+
+@media (min-width: 800px) {
+    .wrapper {
+        box-shadow: none;
+        background: none;
+        opacity: 0.5;
+        border-radius: 5px;
+        transition: opacity 100ms ease-in;
+    }
+
+    .wrapper:hover {
+        opacity: 1;
+        cursor: pointer;
+        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);;
+    }
+}

src/components/style/fileInput.css

@@ -1,10 +1,13 @@
 .list {
     background: transparent;
-    border-bottom: var(--border);
     overflow: hidden;
     -webkit-overflow-scrolling: touch;
 }
 
-.no-border {
-    border-bottom: none;
+@media (min-width: 800px) {
+    .list:not(.strong) {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
 }

src/components/style/list.css

@@ -66,3 +66,39 @@
     color: var(--darkGrey);
     font-size: var(--fontS);
 }
+
+@media (min-width: 800px) {
+    .listItem:not(.small) {        
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .listItem:not(.small):hover {
+        opacity: 0.7;
+    }
+
+    .thumbnail {
+        width: 94px;
+        height: 144px;
+    }
+
+    .left {
+        margin-right: 0;
+    }
+
+    .listItem:not(.small) .center {
+        border-bottom: none;
+        align-items: center;
+        width: 94px;
+        text-align: center;
+        font-size: var(--fontS);
+    }
+
+    .subtitle {
+        font-size: var(--fontXS);
+    }
+
+    .listItem:last-child {
+        padding-bottom: 0;
+    }
+}

src/components/style/listItem.css

@@ -3,10 +3,20 @@
     height: 84px;
     line-height: 84px;
     text-align: center;
+    cursor: pointer;
 }
 
 .spinner {
     margin-top: 14px;
     margin-bottom: 13px;
     text-align: center;
+    width: 100%;
+}
+
+@media (min-width: 800px) {
+    .loadMore {
+        height: 40px;
+        line-height: 40px;
+        width: 100%;
+    }
 }

src/components/style/listTab.css

@@ -8,5 +8,5 @@
 }
 
 .loading i {
-    width: 20vw;
+    width: 50px;
 }

src/components/style/loading.css

@@ -62,13 +62,18 @@
 }
 
 .button {
+    cursor: pointer;
     border-left: var(--border);
     height: 44px;
     line-height: 44px;
     text-align: center;
     width: 100%;
 }
 
+.button:hover {
+    opacity: 0.5;
+}
+
 .button:first-child {
     border: none;
 }

src/components/style/modal.css

@@ -69,3 +69,39 @@
 :global(.toolbar) .content {
     top: 44px;
 }
+
+@media (min-width: 800px) {
+    .page {
+        position: relative;
+        flex: 1;
+        width: 602px;
+        padding-top: 40px;
+        padding-bottom: 5px;
+    }
+
+    .content {
+        position: static;
+        max-height: 540px;
+    }
+
+    .toolbar {
+        border-bottom: none;
+        background: none;
+    }
+
+    .tabs {
+        background: none;
+        height: 40px;
+    }
+
+    .tabs-top .tabs {
+        top: 0;
+        bottom: initial;
+        height: 38px;
+        justify-content: flex-start;
+        align-items: flex-end;
+        left: 15px;
+        box-shadow: none !important;
+        border-bottom: 1px solid #E9E9E9
+    }
+}

src/components/style/page.css

@@ -59,3 +59,40 @@
 .button-active {
     color: var(--blue);
 }
+
+.button:not(.button-active) {
+    cursor: pointer;
+}
+
+@media (min-width: 800px) {
+    .tab-left,
+    .tab-right,
+    .tab-active {
+        position: static;
+        display: none;
+        transition: none;
+        width: auto;
+    }
+    .tab-active {
+        display: block;
+    }
+
+    .icon {
+        display: none;
+    }
+
+    .button, .button-active {
+        font-size: var(--fontM);
+        width: auto;
+        height: auto;
+        padding-top: 15px;
+        padding-bottom: 5px;
+        margin-right: 15px;
+        border-bottom: 1px solid white;
+        color: black;
+    }
+
+    .button-active {
+        border-bottom-color: #F9973C;
+    }
+}

src/components/style/tabs.css

@@ -1,4 +1,5 @@
 .wrapper {
+    position: relative;
     align-items: center;
     display: flex;
     flex-direction: row;
@@ -18,6 +19,11 @@
     display: flex;
     position: absolute;
     left: 0;
+    cursor: pointer;
+}
+
+.back-button:hover {
+    opacity: 0.7;
 }
 
 .icon {
@@ -28,3 +34,30 @@
     height: 32px;
     fill: var(--blue);
 }
+
+.close-button {
+    display: none;
+    position: absolute;
+    right: 5px;
+    top: -8px;
+    cursor: pointer;
+}
+
+.close-button :hover {
+    opacity: 0.7;
+}
+
+.close-button svg {
+    height: 10px;
+    fill: black;
+}
+
+@media (min-width: 800px) {
+    .title, .back-button {
+        display: none;
+    }
+
+    .close-button {
+        display: block;
+    }
+}

src/components/style/toolbar.css

@@ -1,6 +1,5 @@
 import * as React from 'react'
 import Routes from 'routes'
-const DevTools = require('mobx-react-devtools').default
 
 
 /**
@@ -9,7 +8,6 @@ const DevTools = require('mobx-react-devtools').default
 const Root = () => (
   <div>
     <Routes />
-    <DevTools position={{top: 50, right: 0}}/>
   </div>
 )
 

src/containers/Root/Root.dev.tsx

@@ -22,7 +22,7 @@ export default class BookDetails extends React.PureComponent<Props> {
     }
 
     return (
-      <List noBorder>
+      <List strong>
         <ListItem small center="Автор" right={author}/>
         <ListItem small center="Название" right={title}/>
         <ListItem small center="Статус" right={Status}/>

src/pages/BookPage/components/BookDetails.tsx

@@ -22,7 +22,7 @@ export class BookPage extends React.Component<ContainerProps> {
   render() {
     if (this.props.fetching) {
       return (
-        <Page name="book" toolbar={this.renderToolbar()}>
+        <Page name="book" className={s.bookPage} toolbar={this.renderToolbar()}>
           <Loading />
         </Page>
       );
@@ -32,6 +32,7 @@ export class BookPage extends React.Component<ContainerProps> {
     return (
       <Page
         name="book"
+        className={s.bookPage}
         toolbar={this.renderToolbar()}
         tabbar={this.renderBottomToolbar()}
       >

src/pages/BookPage/components/BookPage.tsx

@@ -11,3 +11,13 @@
     margin: 15px;
     text-align: center;
 }
+
+@media (min-width: 800px) {
+    .book-page {
+        width: 310px;
+        flex: none;
+        padding-top: 10px;
+        padding-bottom: 40px;
+        border-left: 1px solid #E9E9E9;
+    }
+}