fixed node appearance

src/components/node/NodePanel/index.tsx

@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 import * as styles from './styles.scss';
 import { Group } from '~/components/containers/Group';
 import { Filler } from '~/components/containers/Filler';
+import {Icon} from "~/components/input/Icon";
 
 interface IProps {}
 
@@ -14,8 +15,12 @@ const NodePanel: FC<IProps> = () => (
       </Filler>
     </Group>
 
-    <div className={styles.mark} />
+    <Group horizontal className={styles.buttons}>
+      <Icon icon="heart" size={24} />
+    </Group>
   </div>
 );
 
 export { NodePanel };
+
+// <div className={styles.mark} />

src/components/node/NodePanel/styles.scss

@@ -37,14 +37,17 @@
 }
 
 .buttons {
-  height: 54px;
+  flex: 0;
-  border-radius: $radius $radius 0 0;
+  padding-right: $gap;
-  background: linear-gradient(176deg, #f42a00, #5c1085);
+  fill: transparentize(white, 0.7);
-  position: absolute;
+  //height: 54px;
-  bottom: 0;
+  //border-radius: $radius $radius 0 0;
-  right: 10px;
+  //background: linear-gradient(176deg, #f42a00, #5c1085);
-  width: 270px;
+  //position: absolute;
-  display: flex;
+  //bottom: 0;
+  //right: 10px;
+  //width: 270px;
+  //display: flex;
 }
 
 .mark {

src/components/node/NodeRelated/styles.scss

@@ -1,7 +1,8 @@
 .wrap {
-  padding: $gap;
+  // padding: $gap;
-  background: transparentize(black, 0.8);
+  //background: transparentize(black, 0.8);
   border-radius: $panel_radius;
+  padding: $gap 0;
 }
 
 .grid {
@@ -14,7 +15,7 @@
 }
 
 .item {
-  background: #222222;
+  background: darken($content_bg, 2%);
   padding-bottom: 100%;
   border-radius: $cell_radius;
 }
@@ -29,6 +30,7 @@
 }
 
 .line {
+  display: none;
   flex: 1;
   height: 2px;
   background: transparentize(white, 0.95);

src/containers/examples/ImageExample/index.tsx

@@ -38,16 +38,6 @@ const ImageExample: FC<IProps> = () => (
 
           <div className={styles.panel}>
             <Group style={{ flex: 1 }}>
-              <Padder className={styles.buttons}>
-                <Group>
-                  <MenuButton title="На главной" description="плывет по течению" icon="star" />
-
-                  <MenuButton title="Видно всем" icon="star" />
-
-                  <MenuButton title="Редактировать" icon="star" />
-                </Group>
-              </Padder>
-
               <Tags
                 tags={[
                   { title: 'Избранный', feature: 'red' },
@@ -70,3 +60,15 @@ const ImageExample: FC<IProps> = () => (
 );
 
 export { ImageExample };
+
+/*
+<Padder className={styles.buttons}>
+  <Group>
+    <MenuButton title="На главной" description="плывет по течению" icon="star" />
+
+    <MenuButton title="Видно всем" icon="star" />
+
+    <MenuButton title="Редактировать" icon="star" />
+  </Group>
+</Padder>
+ */

src/containers/examples/ImageExample/styles.scss

@@ -15,6 +15,8 @@
 
 .content {
   align-items: stretch !important;
+
+  @include vertical_at_tablet;
 }
 
 .comments {

src/sprites/Sprites.tsx

@@ -39,6 +39,11 @@ const Sprites: FC<{}> = () => (
       <path fill="none" d="M0 0h24v24H0V0z" />
       <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" />
     </g>
+
+    <g id="heart" stroke="none">
+      <path fill="none" d="M0 0h24v24H0V0z" />
+      <path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z" />
+    </g>
   </svg>
 );
 

src/styles/global.scss

@@ -80,3 +80,4 @@ body {
 :global(h2) {
   font: $font_24_bold;
 }
+

src/styles/variables.scss

@@ -101,3 +101,24 @@ $input_shadow_filled: $input_shadow;
     touch-action: none;
   }
 }
+
+@mixin phone {
+  @content;
+}
+
+@mixin tablet {
+  @media (max-width: 599px) { @content; }
+}
+
+@mixin vertical_at_tablet {
+  @media (max-width: 599px) {
+    flex-direction: column !important;
+
+    & > * {
+      margin: $gap/2 0 !important;
+
+      &:first-child { margin-top: 0 !important; }
+      &:last-child { margin-bottom: 0 !important; }
+    }
+  }
+}