ecrire 0.28.3 → 0.29.0

data/lib/ecrire/app/assets/stylesheets/admin/posts.scss

@@ -6,15 +6,10 @@ main.posts > section {
   @include flex(1);
   @include display(flex);
   @include flex-direction(column);
-  @include justify-content(center);
-  padding-top: 1em;
-
-  & > div {
-    @include flex(0 180px);
-    margin: 0 auto;
-    padding: 1em;
-  }
+}
 
+main.posts > header + section {
+  margin-top: 260px;
 }
 
 main.posts div.done {
@@ -44,95 +39,64 @@ main.posts div.done {
   }
 }
 
-main.posts > header > nav > div.publish.state {
-  @include transition(background-color 0.2s);
-  position: relative;
-  padding: 2px;
-  margin: 0 2em;
-  width: 10em;
-  height: 30px;
-  background-color: rgba(black, 0.2);
-  color: darken($bright-blue, 25%);
-  border-radius: 60px;
-  cursor: pointer;
-  overflow: hidden;
-
-  &:hover label:last-child {
-    background-color: darken(white, 2%);
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
-  }
+main.posts.view > section:not(.preview) {
+  @include flex-direction(column);
+  @include align-items(center);
+  @include justify-content(flex-start);
 
-  label {
-    display: block;
-    position: absolute;
-    font-weight: bold;
-    line-height: 2em;
-    text-indent: 0;
-    top: 1px;
-    left: 1px;
-    bottom: 1px;
-    cursor: pointer;
-    padding: 0 1em;
+  & > section {
+    @include display(flex);
+    @include flex-direction(column);
+    @include justify-content(center);
+    @include align-items(center);
   }
 
-  label:first-child {
-    @include transition(background 0.2s, text-indent 0.2s);
-    right: 1px;
-    background-color: #f1f1f1;
-    border-radius: 30px;
-    text-indent: 0;
+  svg.tag.icon {
+    width: 3em;
+    margin: 3em 0 0 0;
+    fill: lighten($gray-blue, 25%);
   }
 
-  label:last-child {
-    @include transition(background 0.2s, box-shadow 0.2s, margin 0.2s);
-    width: 28px;
-    background-color: white;
-    border-radius: 100%;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-    text-indent: 30px;
+  h3 {
+    @include display(flex);
+    @include align-items(center);
+    color: lighten($gray-blue, 15%);
+    font-size: 2em;
+    margin: 0;
   }
 
-  &[published='true'] {
-    background-color: rgba(black, 0.5);
-
-    label:first-child {
-      background-color: darken($bright-blue, 25%);
-      color: lighten($bright-blue, 50%);
-    }
-
-    label:last-child {
-      margin-left: calc(10em - 30px);
-      text-indent: 10em;
-    }
-  }
+  ul {
+    max-width: 600px;
+    width: 100%;
+    margin: 1em 0;
 
-  &:not([published='true']) {
-    label:first-child {
-      text-indent: -20em;
+    li {
+      @include display(flex);
+      @include align-items(center);
+      font-size: 1.3em;
+      font-weight: bold;
     }
 
-    label:last-child {
-    }
   }
-
 }
 
-#PostsIndex header {
+#PostsIndex > section.posts {
   @include flex-direction(row);
+  max-width: 900px;
+  width: 100%;
+  margin: 48px auto 0 auto;
+}
 
-  min-height: 200px;
-
-  & > section {
-    @include flex(1);
-    @include display(flex);
-  }
+#PostsIndex > section.posts > div.posts.list.filters {
+  @include flex(1);
+  margin: 2em 0;
 }
 
-#PostsIndex header section.search {
+#PostsIndex > section.posts div.posts.list.filters div.search {
+
   @include display(flex);
-  @include align-items(stretch);
 
-  border: 1px solid darken($bright-blue, 10%);
+  border: 1px solid darken($gray-blue, 10%);
   border-radius: 2px;
   overflow: hidden;
   background-color: lighten($gray-blue, 50%);
@@ -192,105 +156,57 @@ main.posts > header > nav > div.publish.state {
   }
 }
 
-#PostsIndex section.posts {
-  @include flex-direction(row);
-  @include justify-content(space-between);
-  max-width: 1000px;
-  width: 100%;
-  margin: 0 auto;
+
+#PostsIndex > section.posts ul.filters {
+  @include flex(1);
+  @include display(flex);
+}
+
+#PostsIndex > section.posts ul.filters li {
+  margin: 12px 24px 12px 0;
 }
 
-#PostsIndex ol.posts {
+#PostsIndex > section.posts ul.posts {
   @include display(flex);
   @include flex-direction(column);
-  @include flex-wrap(wrap);
-  @include justify-content(flex-start);
-
-  margin: 2em 1em;
-  max-width: 400px;
+  
   width: 100%;
-
-  & > h3 {
-    @include align-self(center);
-    text-align: center;
-    font-size: 3em;
-    font-weight: bolder;
-    border-bottom: 1px solid $gray-blue;
-  }
-
-  li {
-    @include display(flex);
-    @include flex-direction(column);
-    @include flex(0 0 auto);
-    @include justify-content(space-between);
-    padding: 1em;
-    margin: 0.1em;
-    color: darken($navy-blue, 25%);
-
-    .title {
-      margin: 0.5em 0;
-      font-weight: bolder;
-      font-size: 1.7em;
-      text-decoration: none;
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-
-    svg {
-      width: 12px;
-      fill: $gray-blue;
-    }
-
-    a {
-      color: inherit;
-    }
-  }
+  max-width: 500px;
 }
 
-#PostsIndex header section.new {
+#PostsIndex > section.posts > aside {
+  @include display(flex);
+  @include flex-direction(column);
+  width: 200px;
   margin: 0 1em;
-  a {
-    @include transition(box-shadow 0.2s);
-    text-transform: uppercase;
-    font-size: 0.8em;
-    font-weight: bold;
-    padding: 4px 8px;
-    border-radius: 2px;
-    color: lighten($green, 35%);
-    text-shadow: 0 -1px darken($green, 10%);
-    text-decoration: none;
-    background-color: darken($green, 5%);
-    box-shadow: inset 0 1px 1px 0 lighten($green, 15%), 0 1px 1px transparent;
-
-    &:hover {
-      box-shadow: inset 0 1px 1px 0 transparent, 0 1px 1px darken($green, 25%);
-    }
-
-    &:active {
-      box-shadow: none;
-    }
+  border-right: 1px solid $light-blue;
+  padding: 2em 1em;
+  label {
+    cursor: pointer;
   }
 }
 
-#PostsIndex ~ div.overlay #TagsList {
-  h2 {
-    text-align: center;
-    margin: 0;
-    padding: 1em 0;
-    background-color: $gray-blue;
-    border-bottom: 1px solid lighten($light-blue, 25%);
-    color: lighten($light-blue, 25%);
+#PostsIndex > section.posts > aside a.new.post {
+  @include transition(box-shadow 0.2s);
+  text-align: center;
+  text-transform: uppercase;
+  font-size: 0.8em;
+  font-weight: bold;
+  padding: 4px 8px;
+  border-radius: 2px;
+  color: lighten($green, 35%);
+  text-shadow: 0 -1px darken($green, 10%);
+  text-decoration: none;
+  background-color: darken($green, 5%);
+
+  &:active {
+    box-shadow: none;
   }
+}
 
-  li {
-    @include transition(background-color 0.2s ease);
-    padding: 1em;
-    margin: 0;
-    cursor: pointer;
-    &:hover {
-      background-color: $light-blue;
-    }
+#PostsIndex > section.posts > ul.posts li {
+  h3 {
+    font-size: 1.8em;
   }
 }
 
@@ -337,120 +253,3 @@ main.posts > header > nav > div.publish.state {
   }
 }
 
-main.posts > header {
-
-  h2 {
-    @include display(flex);
-    @include flex(1);
-    font-size: 2.3em;
-    margin: 1em 0;
-    text-align: center;
-    color: lighten($gray-blue, 50%);
-  }
-
-  nav {
-    @include display(flex);
-    @include justify-content(space-between);
-    @include align-items(center);
-    @include flex(0 auto);
-
-    z-index: 100;
-    width: 100%;
-    margin: 2em 0 0 0;
-    padding: 0 1em;
-  }
-
-}
-
-
-main.posts.view > section:not(.preview) {
-  @include flex-direction(column);
-  @include align-items(center);
-  @include justify-content(flex-start);
-
-  & > section {
-    @include display(flex);
-    @include flex-direction(column);
-    @include justify-content(center);
-    @include align-items(center);
-  }
-
-  svg.tag.icon {
-    width: 3em;
-    margin: 3em 0 0 0;
-    fill: lighten($gray-blue, 25%);
-  }
-
-  h3 {
-    @include display(flex);
-    @include align-items(center);
-    color: lighten($gray-blue, 15%);
-    font-size: 2em;
-    margin: 0;
-  }
-
-  ul {
-    max-width: 600px;
-    width: 100%;
-    margin: 1em 0;
-
-    li {
-      @include display(flex);
-      @include align-items(center);
-      font-size: 1.3em;
-      font-weight: bold;
-    }
-
-  }
-}
-
-main.posts.view > section.preview {
-  @include justify-content(flex-start);
-  max-width: 800px;
-  width: 100%;
-  margin: 3em auto;
-  padding: 0 2em;
-
-  font-size: 1.3em;
-  line-height: 1.6em;
-
-  h1,h2,h3,h4,h5,h6 {
-    font-weight: bolder;
-  }
-
-  ul, ol {
-    padding-left: 1em;
-  }
-
-  ul {
-    list-style-type: circle;
-  }
-
-  ol {
-    list-style-type: decimal;
-  }
-
-  li {
-    margin: 0.3em 0;
-  }
-
-  p {
-    margin: 1.5em 0;
-  }
-
-  pre {
-    font-size: 0.7em;
-    background: lighten($gray-blue, 40%);
-    padding: 0;
-
-    header {
-      background: lighten($gray-blue, 20%);
-      padding: 0.3em 1em;
-    }
-
-    code {
-      display: block;
-      padding: 0.8em;
-    }
-  }
-}

data/lib/ecrire/app/assets/stylesheets/admin/preview.scss

@@ -0,0 +1,55 @@
+#PostPreviewContent > article {
+  @include justify-content(flex-start);
+
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 0 1em 6em 1em;
+  width: 100%;
+
+  font-size: 1.3em;
+  line-height: 1.6em;
+
+  h1,h2,h3,h4,h5,h6 {
+    font-weight: bolder;
+  }
+
+  ul, ol {
+    padding-left: 1em;
+  }
+
+  ul {
+    list-style-type: circle;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  li {
+    margin: 0.3em 0;
+  }
+
+  p {
+    margin: 1.5em 0;
+  }
+}
+
+#PostPreviewContent pre {
+  background-color: $light-blue;
+  font-size: 0.7em;
+  border-radius: 2px;
+  overflow: hidden;
+  padding: 0;
+
+  header {
+    padding: 0.3em 1em;
+    background-color: $navy-blue;
+    color: $light-blue;
+    font-style: italic;
+  }
+
+  code {
+    padding: 1em;
+    display: inline-block;
+  }
+}

data/lib/ecrire/app/assets/stylesheets/admin/tags.scss

@@ -1,3 +1,62 @@
+#PostEditContent > div.tags {
+  color: $gray-blue;
+  text-align: center;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+[as='Popup'].tags > form {
+  @include display(flex);
+  @include flex-direction(column);
+}
+
+[as='Popup'].tags > form > input {
+  border: 1px solid $gray-blue;
+  margin: 1em 1em 0 1em;
+  font-size: 1.2em;
+  line-height: 1.2em;
+}
+
+[as='Popup'].tags > form > p.message {
+  margin: 0 0 1em 0;
+  padding: 0 2em;
+  text-align: center;
+  font-size: 0.8em;
+  color: $gray-blue;
+}
+
+[as='Popup'].tags > ul.tags > li.empty {
+  text-align: center;
+  font-size: 1.2em;
+  margin: 1em 0;
+  color: $gray-blue;
+}
+
+[as='Popup'].tags > ul.tags > li.tag {
+  @include display(flex);
+  margin: 0;
+  cursor: pointer;
+
+  input {
+    visibility: hidden;
+  }
+
+  label {
+    @include flex(1);
+    padding: 1em;
+    cursor: inherit;
+  }
+  
+  input:checked + label {
+    font-weight: bold;
+  }
+
+  &:hover, &:focus {
+    outline: none;
+    background-color: $light-blue;
+  }
+}
+
 #TagsIndex, #TagsCreate {
   header > form {
     @include display(flex);