replacement col in page list content by the flexbox properties

src/component/Workspace/FileItem.jsx

@@ -45,46 +45,40 @@ const FileItem = props => {
 
   return (
     <div className={classnames('file', 'align-items-center', {'item-last': props.isLast}, props.customClass)} onClick={props.onClickItem}>
-      <div className='col-2 col-sm-2 col-md-2 col-lg-2 col-xl-1'>
-        <div className='file__type'>
-          <i className={props.icon} />
-        </div>
+      <div className='file__type'>
+        <i className={props.icon} />
       </div>
 
-      <div className='col-8 col-sm-8 col-md-8 col-lg-8 col-xl-9'>
-        <div className='file__name'>
-          <div className='file__name__text'>
-            { props.name }
-          </div>
+      <div className='file__name'>
+        <div className='file__name__text'>
+          { props.name }
+        </div>
 
-          <div className='d-none d-md-flex'>
-            <BtnExtandedAction onClickExtendedAction={props.onClickExtendedAction} />
-          </div>
+        <div className='d-none d-md-flex'>
+          <BtnExtandedAction onClickExtendedAction={props.onClickExtendedAction} />
+        </div>
 
-          {/*
-            <div className='file__name__icons d-none d-md-flex'>
-              <div className='file__name__icons__download'>
-                <i className='fa fa-download' />
-              </div>
-              <div className='file__name__icons__archive'>
-                <i className='fa fa-archive' />
-              </div>
-              <div className='file__name__icons__delete'>
-                <i className='fa fa-trash-o' />
-              </div>
+        {/*
+          <div className='file__name__icons d-none d-md-flex'>
+            <div className='file__name__icons__download'>
+              <i className='fa fa-download' />
             </div>
-          */ }
-        </div>
+            <div className='file__name__icons__archive'>
+              <i className='fa fa-archive' />
+            </div>
+            <div className='file__name__icons__delete'>
+              <i className='fa fa-trash-o' />
+            </div>
+          </div>
+        */ }
       </div>
 
-      <div className='col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2'>
-        <div className={classnames('file__status d-flex align-items-center justify-content-start') + colorStatus}>
-          <div className='file__status__icon d-block '>
-            <i className={iconStatus} />
-          </div>
-          <div className='file__status__text d-none d-xl-block'>
-            {textStatus}
-          </div>
+      <div className={classnames('file__status d-flex align-items-center justify-content-start') + colorStatus}>
+        <div className='file__status__icon d-block '>
+          <i className={iconStatus} />
+        </div>
+        <div className='file__status__text d-none d-xl-block'>
+          {textStatus}
         </div>
       </div>
     </div>

src/component/Workspace/FileItemHeader.jsx

@@ -4,20 +4,14 @@ import { translate } from 'react-i18next'
 const FileItemHeader = props => {
   return (
     <div className='file__header'>
-      <div className='col-2 col-sm-2 col-md-2 col-lg-2 col-xl-1'>
-        <div className='file__header__type'>
-          {props.t('FileItemHeader.type')}
-        </div>
+      <div className='file__header__type'>
+        {props.t('FileItemHeader.type')}
       </div>
-      <div className='col-8 col-sm-8 col-md-8 col-lg-8 col-xl-9'>
-        <div className='file__header__name'>
-          {props.t('FileItemHeader.document_name')}
-        </div>
+      <div className='file__header__name'>
+        {props.t('FileItemHeader.document_name')}
       </div>
-      <div className='col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2'>
-        <div className='file__header__status'>
-          {props.t('FileItemHeader.status')}
-        </div>
+      <div className='file__header__status'>
+        {props.t('FileItemHeader.status')}
       </div>
     </div>
   )

src/component/Workspace/Folder.jsx

@@ -38,122 +38,116 @@ class Folder extends React.Component {
     return (
       <div className={classnames('folder', {'active': this.state.open, 'item-last': isLast})}>
         <div className='folder__header align-items-center' onClick={this.handleClickToggleFolder}>
+
           <div className='folder__header__triangleborder'>
             <div className='folder__header__triangleborder__triangle' />
           </div>
 
-          <div className='col-2 col-sm-2 col-md-2 col-lg-2 col-xl-1'>
-            <div className='folder__header__name__icon'>
-              <i className={classnames('fa', {'fa-folder-open-o': this.state.open, 'fa-folder-o': !this.state.open})} />
-            </div>
+          <div className='folder__header__icon'>
+            <i className={classnames('fa fa-fw', {'fa-folder-open-o': this.state.open, 'fa-folder-o': !this.state.open})} />
           </div>
 
-          <div className='col-10 col-sm-10 col-md-8 col-lg-8 col-xl-9'>
-            <div className='folder__header__name align-items-center justify-content-between'>
-
-              <div className='folder__header__name__text'>
-                { folderData.title }
-              </div>
+          <div className='folder__header__name'>
+            { folderData.title }
+          </div>
 
-              <div className='folder__header__name__button d-flex align-items-center '>
-
-                <div
-                  className='folder__header__name__button__addbtn mx-4'
-                  onClick={this.handleClickNewFile}
-                >
-                  <button className='addbtn__text btn btn-outline-primary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
-                    {t('Folder.create')} ...
-                  </button>
-
-                  <div className='addbtn__subdropdown dropdown-menu' aria-labelledby='dropdownMenuButton'>
-                    <div className='subdropdown__link dropdown-item'>
-                      <div className='subdropdown__link__folder d-flex align-items-center'>
-                        <div className='subdropdown__link__folder__icon mr-3'>
-                          <i className='fa fa-fw fa-folder-o' />
-                        </div>
-                        <div className='subdropdown__link__folder__text'>
-                          Créer un dossier
-                        </div>
-                      </div>
+          <div className='folder__header__button'>
+
+            <div
+              className='folder__header__button__addbtn'
+              onClick={this.handleClickNewFile}
+            >
+              <button className='addbtn__text btn btn-outline-primary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+                {t('Folder.create')} ...
+              </button>
+
+              <div className='addbtn__subdropdown dropdown-menu' aria-labelledby='dropdownMenuButton'>
+                <div className='subdropdown__link dropdown-item'>
+                  <div className='subdropdown__link__folder d-flex align-items-center'>
+                    <div className='subdropdown__link__folder__icon mr-3'>
+                      <i className='fa fa-fw fa-folder-o' />
                     </div>
-                    <div className='subdropdown__link dropdown-item'>
-                      <div className='subdropdown__link__apphtml d-flex align-items-center'>
-                        <div className='subdropdown__link__apphtml__icon mr-3'>
-                          <i className='fa fa-fw fa-file-text-o' />
-                        </div>
-                        <div className='subdropdown__link__apphtml__text'>
-                          Rédiger un document
-                        </div>
-                      </div>
+                    <div className='subdropdown__link__folder__text'>
+                      Créer un dossier
                     </div>
-                    <div className='subdropdown__link dropdown-item'>
-                      <div className='subdropdown__link__appfile d-flex align-items-center'>
-                        <div className='subdropdown__link__appfile__icon mr-3'>
-                          <i className='fa fa-fw fa-file-image-o' />
-                        </div>
-                        <div className='subdropdown__link__appfile__text'>
-                          Importer un fichier
-                        </div>
-                      </div>
+                  </div>
+                </div>
+                <div className='subdropdown__link dropdown-item'>
+                  <div className='subdropdown__link__apphtml d-flex align-items-center'>
+                    <div className='subdropdown__link__apphtml__icon mr-3'>
+                      <i className='fa fa-fw fa-file-text-o' />
                     </div>
-                    <div className='subdropdown__link dropdown-item'>
-                      <div className='subdropdown__link__appmarkdown d-flex align-items-center'>
-                        <div className='subdropdown__link__appmarkdown__icon mr-3'>
-                          <i className='fa fa-fw fa-file-code-o' />
-                        </div>
-                        <div className='subdropdown__link__appmarkdown__text'>
-                          Rédiger un document markdown
-                        </div>
-                      </div>
+                    <div className='subdropdown__link__apphtml__text'>
+                      Rédiger un document
                     </div>
-                    <div className='subdropdown__link dropdown-item'>
-                      <div className='subdropdown__link__appthread d-flex align-items-center'>
-                        <div className='subdropdown__link__appthread__icon mr-3'>
-                          <i className='fa fa-fw fa-comments-o' />
-                        </div>
-                        <div className='subdropdown__link__appthread__text'>
-                          Lancer une discussion
-                        </div>
-                      </div>
+                  </div>
+                </div>
+                <div className='subdropdown__link dropdown-item'>
+                  <div className='subdropdown__link__appfile d-flex align-items-center'>
+                    <div className='subdropdown__link__appfile__icon mr-3'>
+                      <i className='fa fa-fw fa-file-image-o' />
+                    </div>
+                    <div className='subdropdown__link__appfile__text'>
+                      Importer un fichier
                     </div>
-                    <div className='subdropdown__link dropdown-item'>
-                      <div className='subdropdown__link__apptask d-flex align-items-center'>
-                        <div className='subdropdown__link__apptask__icon mr-3'>
-                          <i className='fa fa-fw fa-list-ul' />
-                        </div>
-                        <div className='subdropdown__link__apptask__text'>
-                          Créer une tâche
-                        </div>
-                      </div>
+                  </div>
+                </div>
+                <div className='subdropdown__link dropdown-item'>
+                  <div className='subdropdown__link__appmarkdown d-flex align-items-center'>
+                    <div className='subdropdown__link__appmarkdown__icon mr-3'>
+                      <i className='fa fa-fw fa-file-code-o' />
                     </div>
-                    <div className='subdropdown__link dropdown-item'>
-                      <div className='subdropdown__link__appissue d-flex align-items-center'>
-                        <div className='subdropdown__link__appissue__icon mr-3'>
-                          <i className='fa fa-fw fa-ticket' />
-                        </div>
-                        <div className='subdropdown__link__appissue__text'>
-                          Ouvrir un ticket
-                        </div>
-                      </div>
+                    <div className='subdropdown__link__appmarkdown__text'>
+                      Rédiger un document markdown
                     </div>
                   </div>
                 </div>
-
-                <div className='d-none d-md-flex'>
-                  <BtnExtandedAction onClickExtendedAction={{
-                    edit: e => onClickExtendedAction.edit(e, folderData),
-                    move: e => onClickExtendedAction.move(e, folderData),
-                    download: e => onClickExtendedAction.download(e, folderData),
-                    archive: e => onClickExtendedAction.archive(e, folderData),
-                    delete: e => onClickExtendedAction.delete(e, folderData)
-                  }} />
+                <div className='subdropdown__link dropdown-item'>
+                  <div className='subdropdown__link__appthread d-flex align-items-center'>
+                    <div className='subdropdown__link__appthread__icon mr-3'>
+                      <i className='fa fa-fw fa-comments-o' />
+                    </div>
+                    <div className='subdropdown__link__appthread__text'>
+                      Lancer une discussion
+                    </div>
+                  </div>
+                </div>
+                <div className='subdropdown__link dropdown-item'>
+                  <div className='subdropdown__link__apptask d-flex align-items-center'>
+                    <div className='subdropdown__link__apptask__icon mr-3'>
+                      <i className='fa fa-fw fa-list-ul' />
+                    </div>
+                    <div className='subdropdown__link__apptask__text'>
+                      Créer une tâche
+                    </div>
+                  </div>
                 </div>
+                <div className='subdropdown__link dropdown-item'>
+                  <div className='subdropdown__link__appissue d-flex align-items-center'>
+                    <div className='subdropdown__link__appissue__icon mr-3'>
+                      <i className='fa fa-fw fa-ticket' />
+                    </div>
+                    <div className='subdropdown__link__appissue__text'>
+                      Ouvrir un ticket
+                    </div>
+                  </div>
+                </div>
+              </div>
 
+              <div className='d-none d-md-flex'>
+                <BtnExtandedAction onClickExtendedAction={{
+                  edit: e => onClickExtendedAction.edit(e, folderData),
+                  move: e => onClickExtendedAction.move(e, folderData),
+                  download: e => onClickExtendedAction.download(e, folderData),
+                  archive: e => onClickExtendedAction.archive(e, folderData),
+                  delete: e => onClickExtendedAction.delete(e, folderData)
+                }} />
               </div>
+
             </div>
           </div>
 
-          <div className='col-0 col-sm-0 col-md-2 col-lg-2 col-xl-2' />
+          <div className='folder__header__status' />
 
         </div>
 

src/css/FileItem.styl

@@ -12,22 +12,37 @@
 
 .file
   display flex
+  align-items center
   padding 10px 0
   border-bottom 0
+  width 100%
   cursor pointer
   &:hover
     background-color hover-theme
   &__type
+    flex-grow 0
+    padding 0 25px
     font-size 30px
     text-align center
   &__name
     display flex
     align-items center
     justify-content space-between
+    flex-grow 2
+    flex-shrink 2
+    white-space nowrap
+    overflow hidden
+    text-overflow ellipsis
     &__text
       margin-right 10px
+
       font-size 17px
   &__status
+    display flex
+    justify-content space-between
+    flex-grow 0
+    padding 0 15px
+    width 180px
     &__text
       margin-left 15px
       font-size 20px

src/css/FileItemHeader.styl

@@ -2,12 +2,14 @@
   display flex
   font-size 17px
   &__type
-    padding 15px 0
+    flex-grow 0
+    padding 15px 25px
     text-align center
   &__name
+    flex-grow 2
     padding 15px 5px
-    width 100%
   &__status
-    padding 15px 0
-    width 100%
+    flex-grow 0
+    padding 15px
+    width 180px
     text-align center

src/css/Folder.styl

@@ -16,8 +16,8 @@ border-style = 1px solid secondColor
 // @Info: the very last line of file or folder has it's border bottom added in js
 // -----------------------------------------------------
 
-.folder > .folder__content > .file, .folder > .folder__content > .extandedaction
-  padding-right 7px
+// .folder > .folder__content > .file, .folder > .folder__content > .extandedaction
+//   padding-right 7px
 
 folderclose()
   height 0
@@ -51,7 +51,7 @@ folderopen()
   &__header
     position relative
     display flex
-    justify-content space-between
+    align-items center
     margin-left -30px
     border-bottom 0
     padding 10px 0
@@ -78,45 +78,54 @@ folderopen()
         border-style solid
         border-width 25px 30px 0 30px
         border-color lightGrey transparent transparent transparent
+    &__icon
+      flex-grow 0
+      padding 0 25px
+      font-size 30px
+      color darkGrey
+      text-align center
     &__name
-      display flex
-      &__icon
-        font-size 25px
-        color darkGrey
-        text-align center
-      &__text
-        margin 0 15px 0 0
-        white-space nowrap
-        text-overflow ellipsis
-        overflow hidden
-        width 400px
-        font-size 17px
-        color darkGrey
-      &__button
-        &__advancedbtn
-          position relative
-        &__addbtn
-          margin auto 0
-          cursor pointer
-          &:hover > .folder__header__name__addbtn__text
-            color white
-          .addbtn
-            &__text
-              font-size 17px
-              color fontColor
-              border-color secondColor
-              &:hover, &:focus, &:active
-                color off-white
-                border-color thirdColor
-                background-color thirdColor
-                box-shadow 0 0 1px 2px fifthColor
-                outline fifthColor
-              &::after
-                margin-left 20px
-            &__subdropdown
-              padding 0
-              .subdropdown__link
-                padding 10px
+      flex-grow 2
+      flex-shrink 2
+      margin 0 15px 0 0
+      white-space nowrap
+      text-overflow ellipsis
+      overflow hidden
+      width 400px
+      font-size 17px
+      color darkGrey
+    &__button
+      flex-grow 0
+      &__advancedbtn
+        position relative
+      &__addbtn
+        display flex
+        margin auto 0
+        cursor pointer
+        &:hover > .folder__header__name__addbtn__text
+          color white
+        .addbtn
+          &__text
+            margin-right 40px
+            font-size 17px
+            color fontColor
+            border-color secondColor
+            &:hover, &:focus, &:active
+              color off-white
+              border-color thirdColor
+              background-color thirdColor
+              box-shadow 0 0 1px 2px fifthColor
+              outline fifthColor
+            &::after
+              margin-left 20px
+          &__subdropdown
+            padding 0
+            .subdropdown__link
+              padding 10px
+    &__status
+      flex-grow 0
+      padding 0 15px
+      width 180px
     &__contenttype
       display flex
       justify-content flex-end