comunit-base 0.37.200628.0

data/app/assets/stylesheets/comunit/base/components/posts/item.scss

@@ -0,0 +1,91 @@
+@import "comunit/base/default";
+
+.post-item {
+  margin: 12px 0 0 10px;
+
+  > header {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px dotted #919191;
+    min-height: 18px;
+    align-items: center;
+
+    .author {
+      font-size: 11px;
+
+      a {
+        color: #646464;
+        text-decoration: none;
+      }
+    }
+  }
+
+  > h1 {
+    text-transform: uppercase;
+    //color: #9c8c4e;
+    font-weight: bold;
+    margin-bottom: 22px;
+    margin-top: 7px;
+    font-size: 12px;
+  }
+
+  .body {
+    margin: 10px 0 0 0;
+
+    .lead {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      figure {
+        flex-basis: 300px;
+        margin: 0;
+        padding: 0;
+
+        img {
+          max-width: 300px;
+          max-height: 300px;
+        }
+      }
+
+      p {
+        flex: 1;
+        margin-left: 15px;
+      }
+    }
+
+    iframe {
+      max-width: 100%;
+    }
+  }
+
+  .post-attachments {
+    border-top: var(--border-secondary);
+    font-size: var(--font-size-decreased);
+    margin: var(--spacer-s) 0;
+    padding: var(--spacer-s) var(--spacer-m);
+
+    h3 {
+      color: var(--text-color-secondary);
+      font-size: var(--font-size-normal);
+    }
+  }
+
+  .time {
+    font-size: var(--font-size-small);
+    padding: var(--spacer-xs) 0;
+    text-align: right;
+  }
+
+  .footer {
+    clear: both;
+    align-items: center;
+    border-bottom: dotted 0.1rem;
+    color: var(--text-color-secondary);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin: 0.4rem;
+    padding: 0 0 0.4rem 0;
+  }
+}

data/app/assets/stylesheets/comunit/base/components/posts/list.scss

@@ -0,0 +1,20 @@
+.posts-list {
+  display: grid;
+  grid-auto-rows: auto;
+  grid-gap: var(--spacer-xs);
+  grid-template-columns: repeat(3, 1fr);
+  margin: var(--spacer-s) auto;
+}
+
+@media (max-width: 720px) {
+  .posts-list {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 480px) {
+  .posts-list {
+    grid-template-columns: 1fr;
+    max-width: 40rem;
+  }
+}

data/app/assets/stylesheets/comunit/base/components/posts/my-form.scss

@@ -0,0 +1,32 @@
+@import "comunit/base/default";
+
+.my-post-form {
+  padding: var(--spacer-xxs);
+
+  .fields {
+    > div {
+      margin: 0 0 var(--spacer-xs) 0;
+      padding: var(--spacer-xs) 0;
+    }
+  }
+
+  dt {
+    font-family: var(--font-family-heading);
+    font-size: var(--font-size-increased);
+  }
+
+  dd {
+    margin: 0;
+  }
+
+  input:not([type=checkbox]):not([type=radio]),
+  textarea {
+    margin: 0;
+    padding: var(--spacer-xxs) var(--spacer-xs);
+    width: 100%;
+  }
+
+  input[type=datetime-local] {
+    width: 19ch;
+  }
+}

data/app/assets/stylesheets/comunit/base/components/posts/preview.scss

@@ -0,0 +1,169 @@
+@import "comunit/base/default";
+
+.post-preview {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  &:hover {
+    box-shadow: 0 0 .2rem rgba(0, 0, 0, .25);
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  figure {
+    background: linear-gradient(to top, #eee, #fff);
+
+    a {
+      display: block;
+    }
+  }
+
+  .title {
+    font-family: var(--font-family-heading);
+    font-size: var(--font-size-large);
+    padding: var(--spacer-xxs);
+  }
+
+  .text {
+    margin-bottom: auto;
+  }
+
+  .lead {
+    color: var(--text-color-secondary);
+    padding: var(--spacer-xxs);
+  }
+
+  .meta {
+    font-size: var(--font-size-decreased);
+    padding: 0 var(--spacer-xxs);
+  }
+
+  .time-and-author {
+    align-items: center;
+    display: flex;
+    margin-top: var(--spacer-xxs);
+  }
+
+  .author {
+    flex: 1;
+  }
+
+  time {
+    color: var(--text-color-secondary);
+    flex: none;
+    margin-left: auto;
+  }
+
+  .post-counters {
+    margin-top: var(--spacer-xxs);
+  }
+}
+
+.posts-preview {
+  display: flex;
+  flex-wrap: wrap;
+  margin: .8rem auto;
+  padding: 0;
+
+  li {
+    box-shadow: 0 0 .2rem rgba(0, 0, 0, .25);
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    margin: .4rem auto 1.6rem;
+    min-width: 31rem;
+    padding: 0;
+    position: relative;
+    width: 31%;
+  }
+
+  .category {
+    background: $category-background;
+    color: $category-color;
+    margin: auto 0 0 0;
+
+    > div {
+      align-items: center;
+      display: flex;
+      flex-wrap: wrap;
+      padding: .4rem;
+
+      time {
+        color: #444;
+        font-size: 1.2rem;
+        font-weight: 300;
+        margin: 0 0 0 auto;
+        text-align: right;
+      }
+    }
+  }
+
+  .region {
+    color: #444;
+    font-size: 1.2rem;
+    font-weight: 300;
+    width: 100%;
+  }
+
+  .footer {
+    align-items: center;
+    display: flex;
+    height: 2.8rem;
+    padding: .4rem;
+  }
+
+  .author {
+    align-items: center;
+    display: flex;
+    font-size: 1.3rem;
+
+    img {
+      border-radius: .4rem;
+      margin: 0 .4rem 0 0;
+      max-height: 2rem;
+      max-width: 2rem;
+    }
+  }
+
+  .post-counters {
+    align-items: center;
+    display: flex;
+    margin: 0 0 0 auto;
+  }
+
+  figure {
+    position: relative;
+
+    div {
+      background: linear-gradient(to top, #fee, rgba(255, 255, 240, 0));
+      overflow: hidden;
+    }
+
+    img {
+      height: 100%;
+      object-fit: cover;
+      width: 100%;
+    }
+  }
+
+  figcaption {
+    -webkit-backdrop-filter: blur(.2rem);
+    backdrop-filter: blur(.2rem);
+    font-size: var(--font-size-increased);
+    font-weight: 500;
+    padding: .4rem;
+    text-transform: uppercase;
+  }
+
+  .body {
+    .lead {
+      color: #777;
+      font-size: 1.3rem;
+      padding: .5rem;
+    }
+  }
+}

data/app/assets/stylesheets/comunit/base/default.scss

@@ -0,0 +1,74 @@
+$font-family-main: "Arial", "Helvetica Neue", "Helvetica", sans-serif !default;
+$font-family-heading: "Arial Narrow", "Arial", "Helvetica Neue", "Helvetica", sans-serif !default;
+
+$background-html: #fff !default;
+$background-body: #fff !default;
+
+$link-color: #0000ff !default;
+
+$content-width: 110rem !default;
+// Breakpoint in pixels for content width limit in #main
+$content-break: 1100px !default;
+
+@import "biovision/base/default";
+
+$main-header-bg: none !default;
+$main-header-middle-bg: none !default;
+
+$header-logo-size: 20rem !default;
+$coat-of-arms-size: 10rem !default;
+
+// Navigation in main header
+$header-nav-bg: #333 !default;
+// Primary menu
+$header-nav-primary-bg: inherit !default;
+$header-nav-primary-color: #fff !default;
+$header-nav-primary-shadow: .1rem .1rem #000 !default;
+$header-nav-primary-active-bg: hsla(0, 0%, 0%, .25) !default;
+$header-nav-primary-active-color: $header-nav-primary-color !default;
+$header-nav-primary-active-shadow: $header-nav-primary-shadow !default;
+// Secondary (drop-down) menu
+$header-nav-secondary-bg: hsl(0, 0%, 50%) !default;
+$header-nav-secondary-color: #fff !default;
+$header-nav-secondary-shadow: .1rem .1rem #000 !default;
+$header-nav-secondary-active-bg: hsla(0, 0%, 0%, .25) !default;
+$header-nav-secondary-active-color: $header-nav-secondary-color !default;
+$header-nav-secondary-active-shadow: $header-nav-secondary-shadow !default;
+
+$section-header-bg: #aaf !default;
+$section-header-color: #fff !default;
+
+// Основное меню: полоска с выпадашками
+$navigation-stripe-background: #333 !default;
+$navigation-stripe-background-active: rgba(127, 127, 127, .6) !default;
+$navigation-stripe-text: #fff !default;
+$navigation-stripe-text-active: $navigation-stripe-text !default;
+$navigation-stripe-text-shadow: .1rem .1rem 0 #000 !default;
+
+// Основное меню: выпадашка первого уровня
+$navigation-primary-background: #333 !default;
+$navigation-primary-background-active: #222 !default;
+$navigation-primary-text: #fff !default;
+$navigation-primary-text-active: $navigation-primary-text !default;
+
+// Основное меню: выпадашка второго уровня
+$navigation-secondary-background: rgba(127, 127, 127, 0.6) !default;
+$navigation-secondary-background-active: rgb(32, 32, 32) !default;
+$navigation-secondary-text: #fff !default;
+$navigation-secondary-text-active: $navigation-secondary-text !default;
+
+// Полоса с заголовком типа «тема дня», «популярные сюжеты» и так далее
+$heading-stripe-background: rgb(232, 232, 232) !default;
+$heading-stripe-text-color: #000 !default;
+$heading-stripe-text-shadow: .1rem .1rem 0 rgb(240, 240, 240) !default;
+
+// Задний фон для списка новостей и самой новости
+$news-background: #fff2cc !default;
+$news-link-color: $link-color !default;
+
+$category-background: #fff2cc linear-gradient(to top, #fff2cc, #fff9e5) !default;
+$category-color: #fff !default;
+
+$main-color-a: #fff2cc !default;
+
+$transparent-block-background: rgba(255, 255, 255, .75) !default;

data/app/assets/stylesheets/comunit/base/default_site.scss

@@ -0,0 +1,6 @@
+@import "comunit/base/users";
+@import "comunit/base/posts";
+@import "comunit/base/entries";
+@import "comunit/base/socialization";
+@import "comunit/base/notifications";
+@import "comunit/base/components";

data/app/assets/stylesheets/comunit/base/entries.scss

@@ -0,0 +1,145 @@
+@import "biovision/base/default";
+@import "comunit/base/default";
+
+div.list-of-posts {
+  > div {
+    background: $row_background_odd;
+
+    &:nth-of-type(even) {
+      background: $row_background_even;
+    }
+  }
+}
+
+.post-preview {
+  margin: 0.8rem 0;
+  padding: 0.8rem;
+  position: relative;
+
+  &.visible_to_community, &.visible_to_followees {
+    .header {
+      background: image_url('icons/lock-yellow.png') no-repeat top right / 2.4rem 2.4rem;
+    }
+  }
+
+
+  &.personal {
+    .header {
+      background: image_url('icons/lock-red.png') no-repeat top right / 2.4rem 2.4rem;
+    }
+  }
+
+  .title {
+    text-transform: uppercase;
+  }
+
+  .header {
+    display: flex;
+    background: #fff;
+
+    .image {
+      flex-basis: 8rem;
+      width: 8rem;
+      height: 8rem;
+
+      img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
+
+    .info {
+      display: flex;
+      align-content: space-between;
+      flex-wrap: wrap;
+      margin: 0 0 0 0.8rem;
+      flex: 1;
+
+      > div {
+        width: 100%;
+      }
+
+      .title {
+        font-size: $font-size-increased;
+        font-weight: normal;
+      }
+
+      .time {
+        font-size: $font-size-decreased;
+      }
+    }
+  }
+
+  .body {
+    margin: 0.8rem 0;
+    padding: 0.8rem;
+
+    .image {
+      margin: 0 .8rem .4rem 0;
+      float: left;
+
+      img {
+        max-width: 100%;
+      }
+    }
+
+    p:first-of-type {
+      margin-top: 0;
+    }
+
+    .more {
+      &::before {
+        content: '(';
+      }
+
+      &::after {
+        content: ')';
+      }
+    }
+  }
+
+  .footer {
+    clear: both;
+    border-top: solid $text-color-secondary 0.1rem;
+    text-align: right;
+    padding: 0.8rem 0.8rem 0;
+    font-size: $font-size-decreased;
+  }
+}
+
+.entry-form {
+  form {
+    input[type=text] {
+      width: calc(100% - 0.8rem);
+    }
+
+    > div {
+      margin: 0 0 0.8rem 0;
+    }
+  }
+
+  .privacy {
+    ul {
+      margin: 0;
+      padding: 0 0 0 1.6rem;
+
+      li {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+    }
+  }
+}
+
+@media screen and(max-width: 400px) {
+  .post-preview {
+    .header {
+      .image {
+        flex-basis: 4rem;
+        width: 4rem;
+        height: 4rem;
+      }
+    }
+  }
+}