infeeeee/dis-2019
1
0
Fork 0
Code Issues 6 Pull Requests Releases 19 Wiki Activity

home hover improvements, docs

Browse Source
This commit is contained in:
Péter Gyetvai
2019-06-22 22:09:39 +02:00
parent 1cc5df0c40
commit 8b99976607
9 changed files with 136 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
KÉZIKÖNYV.md Normal file
View File

@@ -0,0 +1,42 @@
# Felhasználói kézikönyv
## Telepítés utáni teendők:
### function.php
esemény cat-id-t átírni!!
### wp beállítások
settings>reading>Blog pages show at most 6
## Paraméterek
### Bejegyzések
#### dis-alcim
Csak az első két nagy cikknél jelenik meg
#### dis-bevezeto
Csak az első két nagy cikknél jelenik meg
### Események
#### dis-esemeny-datum
#### dis-esemeny-link
## Developement verzió telepítése
Szükséges: python2, gulp global, max node 11
Mountnál exec paramétert nem kifelejteni!!!
```
nvm install 11
nvm use 11
sudo apt install python
npm install gulp-cli -g
nvm install dev
```

2
README.md
View File

@@ -6,4 +6,4 @@ Live website: (designisso.com)[http://designisso.com/]
Built from HTML5 Blank theme: https://github.com/html5blank/html5blank
Usage and install instructions in hungarian here: [KÉZIKÖNYV.md](KÉZIKÖNYV.md)

32
_jegyzet.md
View File

@@ -1,14 +1,3 @@
# Telepítés új gépre:
Szükséges: python2, gulp global, max node 11
Mountnál exec paramétert nem kifelejteni!!!
```
nvm install 11
nvm use 11
sudo apt install python
npm install gulp-cli -g
nvm install dev
```
# Kérdések
@@ -40,7 +29,7 @@ Kezdőlap:
~két nagy, utána kicsi rácsban~
~Nincs gradiens~
~Hover csak a címen~
Nyíl, csak az első cikken
~Nyíl, csak az első cikken~
~cursor módosítás tekerésre~
Kis ikonok hover:
~- maszkok bedo alapján~
@@ -49,13 +38,12 @@ Kis ikonok hover:
Nagycímek:
~- utána margó~
- az is megnő, minden mint
Excerpt a főoldalon hoverre: külön paraméter, nem excerpt!!
~Excerpt a főoldalon hoverre: külön paraméter, nem excerpt!!~
og: tag: pluginnal!
Dátumot átírni
~Dátumot átírni~
Szőveg kilóg a margóra!
@@ -93,10 +81,10 @@ Kereső:
# jegyzet 2019.06.12
## kezdőlap
hover: ne nőjjön meg, csak a szín
a vonal felcsuszás animálva
~hover: ne nőjjön meg, csak a szín~
~a vonal felcsuszás animálva~
~a szélek alá is kerüljön szín~
képre is hover, képre is klikk
~képre is hover, képre is klikk~
kép pontosabb arány
alapből lehet hogy több látszódjon
maszkok: mindig csak 2-t sorsol, és nem egymás mellettieket, nem egymás alattiakat
@@ -110,11 +98,3 @@ Kereső:
## single:
képen ne legyen cím
# Post-install teendők:
- function.php
esemény cat-id-t átírni!!
- wp beállítások
settings>reading>Blog pages show at most 6

22
css/base.css
View File

@@ -646,7 +646,8 @@ object {
flex-direction: row;
padding: 0;
justify-content: flex-start;
align-items: center; } }
align-items: center;
overflow: visible !important; } }
@media (min-width: 769px) and (min-width: 769px) {
.archive main section .home-wrapper-big article .metadata,
.home main section .home-wrapper-big article .metadata {
@@ -714,6 +715,19 @@ object {
width: 40%;
height: 1px;
align-self: flex-start; }
.archive main section .home-wrapper-big article .metadata .curvyArrow,
.home main section .home-wrapper-big article .metadata .curvyArrow {
position: absolute;
right: 0;
top: 0;
height: 15rem;
width: 7.5rem; }
.archive main section .home-wrapper-big article .metadata .curvyArrow object,
.home main section .home-wrapper-big article .metadata .curvyArrow object {
height: 15rem;
position: absolute;
right: 0;
top: calc(-50% + 0.5px); }
.archive main section .home-wrapper-big article.hovered h2 > a,
.home main section .home-wrapper-big article.hovered h2 > a {
color: #000; }
@@ -750,12 +764,6 @@ object {
.archive main section .home-wrapper-big.home-wrapper-1 article .metadata .filler,
.home main section .home-wrapper-big.home-wrapper-1 article .metadata .filler {
position: relative; }
.archive main section .home-wrapper-big.home-wrapper-1 article .metadata .filler::after,
.home main section .home-wrapper-big.home-wrapper-1 article .metadata .filler::after {
content: url("../img/curvy_arrow.svg");
position: absolute;
top: -50%;
right: 0; }
.archive main section .home-wrapper-big.home-wrapper-1 article a.thumbnailwrapper,
.home main section .home-wrapper-big.home-wrapper-1 article a.thumbnailwrapper {
float: right; }

BIN
img/curvy_arrow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

61
img/curvy_arrow.svg
View File

@@ -5,40 +5,41 @@
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 122.1 232.379"
height="232.379"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
viewBox="0 0 122.1 232"
height="232"
width="122.1"
xml:space="preserve"
id="svg2"
version="1.1"><metadata
version="1.1"
sodipodi:docname="curvy_arrow.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)"><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1656"
inkscape:window-height="959"
id="namedview18"
showgrid="false"
inkscape:zoom="2.0311646"
inkscape:cx="20.24125"
inkscape:cy="178.83688"
inkscape:window-x="1062"
inkscape:window-y="261"
inkscape:window-maximized="0"
inkscape:current-layer="svg2" /><metadata
id="metadata8"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs6"><clipPath
id="clipPath18"
clipPathUnits="userSpaceOnUse"><path
id="path16"
d="m 1715,37 h 45 v 974 h -45 z" /></clipPath><clipPath
id="clipPath32"
clipPathUnits="userSpaceOnUse"><path
id="path30"
d="m 799,37 h 800.78 v 972 H 799 Z" /></clipPath><clipPath
id="clipPath64"
clipPathUnits="userSpaceOnUse"><path
id="path62"
d="M 0,1080 H 1920 V 0 H 0 Z" /></clipPath><clipPath
id="clipPath80"
clipPathUnits="userSpaceOnUse"><path
id="path78"
d="M 0,1080 H 1920 V 0 H 0 Z" /></clipPath><clipPath
id="clipPath198"
clipPathUnits="userSpaceOnUse"><path
id="path196"
d="M 0,1080 H 1920 V 0 H 0 Z" /></clipPath><clipPath
id="clipPath222"
clipPathUnits="userSpaceOnUse"><path
id="path220"
d="M 0,1080 H 1920 V 0 H 0 Z" /></clipPath></defs><path
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
id="defs6" /><path
id="path226"
style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 1.044,0 c 0,63.609 53.057,115.94 121.056,115.94 -67.999,0 -121.35,52.828 -121.35,116.439" /></svg>
d="M 0.75,0 C 0.75,63.609 54.101,116 122.1,116 54.101,116 0.75,168.389 0.75,232"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccc" /></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

5
js/scripts.js
View File

@@ -479,11 +479,12 @@
cMetadata.children(".categories, .postedon").addClass("transparent")
//animate border
cMetadata.stop().animate({ height: "25rem" }, _ => {
cMetadata.stop().animate({ height: "25rem" },400, _ => {
//hide metadata
cMetadata.children(".categories, .postedon").hide().removeClass("transparent")
cMetadata.children(".alcim, .bevezeto").show().removeClass("transparent")
})
}, function () {
let cc = $(this)
@@ -502,7 +503,7 @@
cMetadata.children(".alcim, .bevezeto").addClass("transparent")
//animate height change
cMetadata.stop().animate({ height: "10rem" }, _ => {
cMetadata.stop().animate({ height: "10rem" },400, _ => {
//hide and show metadata
cMetadata.children(".alcim, .bevezeto").hide().removeClass("transparent")
cMetadata.children(".categories, .postedon").removeClass("transparent").show()

10
loop.php
View File

@@ -58,6 +58,16 @@
<?php endif;?>
<div class="filler"></div>
<?php if(is_home() and $qc == 1): ; //first post on home ?>
<div class="curvyArrow">
<object data="<?php echo get_template_directory_uri(); ?>/img/curvy_arrow.svg"
type="image/svg+xml">
<img src="<?php echo get_template_directory_uri(); ?>/img/curvy_arrow.png" />
</object>
</div>
<?php endif;?>
</div> <!-- metadata end -->

44
sass/base.scss
View File

@@ -331,7 +331,7 @@ $v-unit-2: 8rem;
// color: #000;
// fill: currentColor;
filter: invert(100%); //black
@include transform(rotate(180deg)) // transform: rotate(180deg);;;;;;;;;;;;;;;;;;;;;;;;
@include transform(rotate(180deg)) // transform: rotate(180deg);;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
}
}
}
@@ -754,6 +754,7 @@ $v-unit-2: 8rem;
padding: 0;
justify-content: flex-start;
align-items: center;
overflow: visible !important;
@include home-metadata-big();
@@ -761,7 +762,7 @@ $v-unit-2: 8rem;
height: calc(#{$h-unit-2} / 2);
}
&>div{
& > div {
flex: 1 0 auto;
}
@@ -808,6 +809,7 @@ $v-unit-2: 8rem;
.transparent,
.transparent a {
color: transparent !important;
//color: #000 !important;
}
.filler {
@@ -816,6 +818,27 @@ $v-unit-2: 8rem;
height: 1px;
align-self: flex-start;
}
.curvyArrow {
position: absolute;
right: 0;
top: 0;
height: ($h-unit-1 + $h-unit-2);
width: ($h-unit-1 + $h-unit-2)/2;
object {
height: ($h-unit-1 + $h-unit-2);
position: absolute;
right: 0;
top: calc(-50% + 0.5px);
// &:first-child {
// // top: calc(-100% + 2px);
// top: -100%;
// // top: unset;
// @include transform(scale(1, -1));
// // @include transform(rotate(-90deg));
// }
}
}
} //metadata end
/* ------------------------- home article big hover ------------------------- */
@@ -829,20 +852,9 @@ $v-unit-2: 8rem;
article {
.metadata {
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, left);
.filler{
.filler {
position: relative;
&::after{
content: url('../img/curvy_arrow.svg');
position: absolute;
top: -50%;
right: 0;
}
}
}
a.thumbnailwrapper {
float: right;
@@ -852,11 +864,11 @@ $v-unit-2: 8rem;
&.home-wrapper-2 {
article {
border-left: #000 1px solid;
.metadata {
justify-content: flex-end;
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, right);
.filler{
.filler {
order: -1;
}
}