ricardogj08/nabu
1
0
Fork 0
Code Issues Pull requests Projects Releases Activity

[Arreglar] el tamaño de las cards y su vista en las diferentes paginas donde se ocupan y reeamplazar la flecha del muro dando una animacion

Browse source
This commit is contained in:
francisco-solis99 2022-03-02 17:39:43 -06:00
parent 67af70327d
commit 69c6ef9756
12 changed files with 87 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
assets/icons/arrow-muro.svg
View file

@ -1,3 +0,0 @@
<svg width="51" height="28" viewBox="0 0 51 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M50.5 1.1767L25.5 27.0052L0.5 1.1767" stroke="black" stroke-width="8" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 254 B

11
assets/styles/components/articles/articles.css
View file

@ -44,12 +44,13 @@
margin: 0 auto;
display: flex;
flex-direction: column;
width: auto;
max-width: 340px;
width: 50%;
max-width: 350px;
min-width: 288px;
max-height: 406px;
max-height: 500px;
border-radius: 8px;
overflow: hidden;
overflow-y: auto;
overflow-x: hidden;
box-shadow: 0 8px 4px 0 rgba(0, 0, 0, 0.25);
background-color: #FFF;
scroll-snap-align: center;
@ -69,9 +70,11 @@
}
.card__info {
height: 100%;
padding: 16px 24px 9px;
display: flex;
flex-direction: column;
justify-content: space-between;
color: #9D9D9D;
}

5
assets/styles/pages/all-articles/all-articles-desktop.css
View file

@ -15,6 +15,11 @@
* junto con este programa. De lo contrario, consulte <https://www.gnu.org/licenses/>.
*/
.articles__cards > .card {
width: 330px;
}
/* Estilos para el CTA desktop */
.CTA {

24
assets/styles/pages/all-articles/all-articles-tablet.css
View file

@ -55,13 +55,19 @@
}
.articles__icon {
display: block;
width: 51px;
height: 28px;
background-image: url(../../../icons/arrow-muro.svg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: inline-block;
font-size: 9rem;
color: var(--color-black);
animation: idle 500ms infinite alternate;
}
@keyframes idle {
0%{
transform: translateY(0) rotate(90deg);
}
100% {
transform: translateY(-25px) rotate(90deg);
}
}
.articles__cards {
@ -74,6 +80,10 @@
/* margin: 0 30px; */
}
.articles__cards > .card {
width: 300px;
}
/* Texto del CTA */
.CTA__title {

5
assets/styles/pages/all-articles/all-articles.css
View file

@ -60,6 +60,11 @@ body {
gap: 30px;
}
/* Estilos para mantener la altura en todos lso articulos */
.articles__cards > .card {
height: 100%;
}
/* Estilos para la sección del CTA */
.CTA {

10
assets/styles/pages/article/article.css
View file

@ -181,14 +181,20 @@ header::before {
cursor: pointer;
}
.heart > a {
display: inline-block;
text-decoration: none;
color: #aab8c2;
}
.post__aside [id='toggle__heart'] {
visibility: hidden;
}
.post__aside [id='toggle__heart']:checked + label {
.post__aside [id='toggle__heart']:checked + label{
color: #e2264d;
animation: heart 1s cubic-bezier(.17, .89, .32, 1.49);
}
}
@keyframes heart {
0%,

10
assets/styles/pages/home/home-desktop.css
View file

@ -51,6 +51,11 @@
max-width: 280px;
}
/* Arreglar la altura de la la informacion, restarle la altura del banner */
.popular-cards__container .card .card__info {
height: calc(100% - 259px);
}
.popular-cards__container .card:not(.card:last-child) {
min-width: initial;
width: 80px;
@ -75,3 +80,8 @@
right: -200px;
}
*/
/* estilso para la seccion de articulos mas recientes */
.recent-cards__container > .card {
width: 330px;
}

5
assets/styles/pages/home/home-tablet.css
View file

@ -59,6 +59,11 @@
justify-content: center;
}
.recent-cards__container > .card {
width: 300px;
}
.CTA__button {
width: 40%;
}

16
assets/styles/pages/profile/profile-desktop.css
View file

@ -65,7 +65,6 @@ header {
object-fit: contain;
}
.profile__link-edit {
right: 35px;
bottom: 60px;
@ -73,5 +72,16 @@ header {
}
.public-posts {
margin-top: 120px;
}
margin-top: 140px;
}
.public-posts__title {
font-size: 2.8rem;
}
.public-cards__container {
flex-direction: row;
justify-content: space-evenly;
flex-wrap: wrap;
align-items: initial;
}

12
assets/styles/pages/profile/profile.css
View file

@ -121,21 +121,29 @@ header::before {
}
.public-posts {
margin-top: 100px;
margin-top: 110px;
width: 100%;
min-width: 320px;
padding: 23px 0;
text-align: center;
}
.public-posts__title {
font-size: 1.8rem;
font-size: 2rem;
color: var(--color-black);
}
.public-cards__container {
display: flex;
align-items: center;
flex-direction: column;
width: 90%;
margin: 0 auto;
}
.public-cards__container .card {
margin: 20px 0;
}
/* Reescribiendo estilos de footer para esta page */
.footer {
background-color: var(--color-black);

10
views/pages/all-articles.php
View file

@ -23,21 +23,21 @@
<?php $styles = array(
'components/navbar/navbar.css',
'components/search/search.css',
'pages/all-articles/all-articles.css',
'components/articles/articles.css',
'components/footer/footer.css',
'components/messages/messages.css',
'components/pagination/pagination.css',
'components/footer/footer.css',
'pages/all-articles/all-articles.css',
) ?>
<!-- Estilos para el responsive design -->
<?php $desktop_styles = array(
array('file' => 'components/navbar/navbar-desktop.css', 'attributes' => 'media="screen and (min-width: 650px)"'),
array('file' => 'components/footer/footer-desktop.css', 'attributes' => 'media="screen and (min-width: 650px)"'),
array('file' => 'components/search/search-desktop.css', 'attributes' => 'media="screen and (min-width: 650px)"'),
array('file' => 'components/pagination/pagination-desktop.css', 'attributes' => 'media="screen and (min-width: 650px)"'),
array('file' => 'components/footer/footer-desktop.css', 'attributes' => 'media="screen and (min-width: 650px)"'),
array('file' => 'pages/all-articles/all-articles-tablet.css', 'attributes' => 'media="screen and (min-width: 650px)"'),
array('file' => 'pages/all-articles/all-articles-desktop.css', 'attributes' => 'media="screen and (min-width: 1024px)"'),
array('file' => 'components/pagination/pagination-desktop.css', 'attributes' => 'media="screen and (min-width: 650px)"'),
) ?>
<!-- Archivos de javascript -->
@ -64,7 +64,7 @@
<section class="articles">
<div class="articles__data">
<h1 class = "articles__title">Muro</h1>
<span class="articles__icon"></span>
<span class="articles__icon">❯</span>
</div>
<div class="articles__cards">
<?php require 'views/components/articles.php' ?>

2
views/pages/profile.php
View file

@ -23,6 +23,7 @@
<?php $styles = array(
'components/navbar/navbar.css',
'components/articles/articles.css',
'components/pagination/pagination.css',
'components/footer/footer.css',
'pages/profile/profile.css',
) ?>
@ -30,6 +31,7 @@
<!-- Estilos para el responsive design -->
<?php $desktop_styles = array(
array('file' => 'components/navbar/navbar-desktop.css', 'attributes' => 'media="screen and (min-width: 768px)"'),
array('file' => 'components/pagination/pagination-desktop.css', 'attributes' => 'media="screen and (min-width: 650px)"'),
array('file' => 'pages/profile/profile-desktop.css', 'attributes' => 'media="screen and (min-width: 768px)"')
) ?>