Merge pull request #1278 from openclassify/metehancelik

blog design for base-theme
This commit is contained in:
Dia Shalabi 2022-02-01 11:05:32 +03:00 committed by GitHub
commit 6fbe43a444
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 388 additions and 0 deletions

View File

@ -0,0 +1,168 @@
.productImage {
max-height: 700px;
overflow: hidden;
}
.bgSpecial_2 {
background-color: #516eab;
}
.bgSpecial_3 {
background-color: #29c5f6;
}
.bgSpecial_4 {
background-color: #eb4026;
}
.bgSpecial_5 {
background-color: #ca212a;
}
.paddingSpecial {
padding: 13px;
margin: 5px 0;
display: flex;
align-items: center;
justify-content: center;
}
.positionSpecial {
position: relative;
top: -100px;
@media (max-width: 768px) {
top: 0;
}
}
// POST LIST
.textBlack {
color: black;
&:hover {
color: black;
}
}
.bannerImage_2 {
img {
width: 100%;
height: 235px;
object-fit: cover;
}
}
.lineGap_2 {
width: 100%;
height: 2px;
background: #fa0f19;
}
.bgForLight {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
z-index: 99999;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
.z-index {
z-index: 9999999999;
}
.fs-17px {
font-size: 17px;
@media (max-width:992px) {
font-size: 14px;
}
}
.bgSpecial_6 {
background-color: black;
}
.ImageWidth {
max-width: 80px;
}
.w-fit {
width: fit-content;
}
.fs-26 {
font-size: 26px;
}
.fs-10 {
font-size: 10px;
}
.left-zero {
left: 0;
}
.h-278{
height: 278px;
}
.w-225{
width: 225px;
}
.bottom-zero {
bottom: 0;
}
.slick-arrow {
width: auto;
height: auto;
}
.slick-next {
right: -40px;
@media (max-width: 768px){
right: 15px;
}
}
.slick-prev {
left: -40px;
z-index: 9999999;
@media (max-width: 768px) {
left: 15px;
}
}
.slick-prev:before,
.slick-next:before {
color: black;
font-size: 40px;
opacity: 1;
@media (max-width: 768px) {
color: white;
}
}
.related-posts-header{
color:black;
}
.related-posts-bottom-divider{
border-color:black;
}
.related-image{
width: 100%;
object-fit: cover;
height: 220px;
margin-top: 5px;
}
.related-image-wrapper{
padding: 0 5px;
display: flex;
align-items: center;
justify-content: center;
}
.single-line{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight:500;
}

View File

@ -43,6 +43,10 @@ return [
'login_with_phone_number' => 'Login with Phone Number',
'login_with_email_address' => 'Login with Email Address',
// Share
'share_on_facebook' => 'Share on Facebook',
'share_on_twitter' => 'Share on Twitter',
// Side menu links
'company_directory' => 'Company directory',
'popular_ads' => 'Popular Ads',
@ -51,6 +55,9 @@ return [
'sms' => 'Send Text Message (SMS)',
'mail' => 'Send Mail',
//Related
'related_posts' => 'Related Posts',
// Register instruction seed
'register_instructions' => 'Register Instructions',
'list' => 'List',
@ -62,4 +69,6 @@ return [
'your_internet_connection_is_broken' => 'Your internet connection is broken,',
'we_miss_you_so_much_already' => 'we miss you so much already!',
'try_again' => 'Try again',
'news_title' => 'Sectoral Developments All in :name',
];

View File

@ -43,6 +43,10 @@ return [
'login_with_phone_number' => 'Telefon Numarası ile Giriş',
'login_with_email_address' => 'E-posta Adresi ile Giriş',
// Share
'share_on_facebook' => 'Facebook\'ta Paylaş',
'share_on_twitter' => 'Twitter\'da Paylaş',
// Side menu links
'company_directory' => 'Firma Rehberi',
'popular_ads' => 'Popüler İlanlar',
@ -51,6 +55,8 @@ return [
'sms' => 'Kısa Mesaj Gönder (SMS)',
'mail' => 'E-posta Gönder',
//Related
'related_posts' => 'İlgili İçerikler',
// Register instruction seed
'register_instructions' => 'Kayıt Talimatları',
'list' => 'Liste',
@ -62,4 +68,7 @@ return [
'your_internet_connection_is_broken' => 'Your internet connection is broken,',
'we_miss_you_so_much_already' => 'we miss you so much already!',
'try_again' => 'Try again',
'news_title' => 'Sektörel Gelişmeler :name\'da',
];

View File

@ -0,0 +1,35 @@
<div class="container mt-2 mb-4 px-0">
<div class="d-flex justify-content-between align-items-center mb-2">
<h5 class="text-left ml-2">{{ trans('visiosoft.theme.base::field.news_title', {name: setting_value('streams::name')}) }}</h5>
<a href="{{ url('posts') }}" class="btn btn-outline-primary all-post-btn d-none d-md-block">
{{ trans('theme::field.all_news') }}
</a>
</div>
<div class="slider">
{% if entries('posts','types').findBySlug('default') %}
{% set posts = entries('posts').type('default').live().limit(4).get() %}
{% for post in posts %}
<div class="px-2">
<div
class="fs-14 product rounded position-relative bg-white link-dark text-decoration-none border">
<div class="product-img">
<a href="{{ post.route('view') }}">
{{ img( post.image.make.url ?? 'visiosoft.theme.base::images/no-image.png').class('w-100')|raw }}
</a>
</div>
<div class="product-text-area p-3">
<div class="fw-500 text-dark single-line">
<a href="{{ post.route('view') }}" class="text-dark">
{{ post.title }}
</a>
</div>
</div>
</div>
</div>
{% endfor %}
{% endif %}
</div>
<a href="{{ url('posts') }}" class="btn btn-outline-yellow mx-2 all-post-btn d-block d-md-none fs-16 font-weight-bold py-2">
{{ trans('theme::field.all_news') }}
</a>
</div>

View File

@ -0,0 +1,95 @@
{% extends layout('posts') %}
{% block styles %}
{{ asset_style("visiosoft.theme.base::css/post.scss") }}
{% endblock %}
{% block content %}
<div class="continer p-0 m-0 maxWidth bg-white mx-auto">
{% set posts = entries('posts').recent().paginate() %}
<div class="row p-4 m-0">
{% for post in posts %}
<a href="{{ post.route('view') }}" class="col-xl-4 col-lg-6 col-md-12 col-12 text-decoration-none my-3">
<div class="bannerImage_2 position-relative">
{{ img( post.cover_photo.make.url ?? 'visiosoft.theme.base::images/no-image.png')
.class('w-100')|raw }}
<span class="p-1 fs-12 bgSpecial_6 position-absolute left-zero bottom-zero text-white">
{{ post.category.name }}
</span>
</div>
<div class="h3 my-2 fw-400 textBlack single-line">
{{ post.title }}
</div>
<div class="h6 my-2 fw-400 text-muted single-line">
{{ post.summary }}
</div>
</a>
{% endfor %}
</div>
</div>
{% set selectedCats = setting_value('visiosoft.theme.base::list_cats') %}
{% for selectedCat in selectedCats %}
<div class="container p-0 m-0 maxWidth bg-white mx-auto">
{% set posts = entries('posts').where('category_id', selectedCat).recent().paginate() %}
{% if posts|length %}
<div class="row p-4 p-0 m-0">
<div class="col-12 my-4">
<div class="fs-18 font-weight-bold text-uppercase">{{ posts.first.category.name }}</div>
<div class="lineGap_2 mt-1"></div>
</div>
<div class="col-md-8 col-12">
<div class="position-relative w-fit shadow-sm">
<a href="{{ posts.first.route('view') }}">
{{ img( posts.first.image.make.url ?? 'visiosoft.theme.base::images/no-image.png')
.class('w-100')|raw }}
<div class="bgForLight"></div>
<div class="d-flex flex-column position-absolute p-4 bottom-zero left-zero z-index">
<div class="text-uppercase bgSpecial_6 fs-12 text-white w-fit p-1 font-weight-bold px-2">
{{ posts.first.category.name }}
</div>
<div class="text-white fs-26">{{ posts.first.title.value }}</div>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-12 mt-md-0 mt-4">
{% for post in posts|slice(1, 3) %}
{% if loop.first %}
<div class="position-relative w-fit shadow-sm">
<a href="{{ post.route('view') }}">
{{ img( post.image.make.url ?? 'visiosoft.theme.base::images/no-image.png').class('w-100')|raw }}
<div class="bgForLight"></div>
<div class="d-flex flex-column position-absolute p-4 bottom-zero left-zero z-index">
<div class="text-white fs-17px">{{ post.title }}</div>
<div class="text-capitalize bg-white mt-2 fs-10 textBlack w-fit p-1 px-2">
{{ post.category.name }}
</div>
</div>
</a>
</div>
{% else %}
<div class="d-flex my-3">
<a href="{{ post.route('view') }}" class="d-flex text-dark">
{{ img( post.image.make.url ?? 'visiosoft.theme.base::images/no-image.png')
.class('ImageWidth mr-3 w-100')|raw }}
<div class="d-flex flex-column">
<div class="text-capitalize fw-500 fs-13">{{ post.title }}</div>
<div class="text-capitalize bgSpecial_6 mt-2 fs-10 text-white w-fit p-1 px-2">
{{ post.category.name }}
</div>
</div>
</a>
</div>
{% endif %}
{% endfor %}
</div>
{{ posts.links|raw }}
</div>
{% endif %}
</div>
{% endfor %}
{% endblock %}

View File

@ -0,0 +1,72 @@
{% extends layout('posts') %}
{% block styles %}
{{ asset_style("visiosoft.theme.base::css/post.scss") }}
{% endblock %}
{% block content %}
<div class="container m-0 p-0 mx-auto maxWidht w-100">
<div class="row p-0 m-0">
<div class="col-12 position-relative my-3">
<div class="productImage">
{{ img(post.cover_photo.make.url).class('w-100')|raw }}
</div>
<div class="px-md-4 px-0 p-md-3 p-0 {{ post.cover_photo ? 'positionSpecial' }} w-100">
<div class="bg-white p-3 px-4">
<h1>{{ post.title }}</h1>
<div class="mt-4 d-flex flex-md-row flex-column">
<a href="https://www.facebook.com/sharer/sharer.php?u={{ app.request.uri|url_encode }}"
class="d-flex align-items-center bgSpecial_2 text-white paddingSpecial mr-2 text-decoration-none">
<i class="fab fa-facebook-f fs-14"></i>
<div class="lineGap mx-3"></div>
<div class="fs-11 ">{{ trans('theme::field.share_on_facebook') }}</div>
</a>
<a href="https://twitter.com/share?url={{ app.request.uri|url_encode }}"
class="d-flex align-items-center bgSpecial_3 text-white paddingSpecial mr-2 text-decoration-none">
<i class="fab fa-twitter"></i>
<div class="lineGap mx-3"></div>
<div class="fs-11 ">{{ trans('theme::field.share_on_twitter') }}</div>
</a>
</div>
<div class="fs-14 mt-3">{{ post.content|raw }}</div>
</div>
</div>
<div class="container m-0 p-0 mx-auto mt-5">
<div class="row p-0 m-0">
<h5 class="related-posts-header mb-0 text-uppercase">
{{ trans('theme::field.related_posts') }}
</h5>
<div class="w-100 border related-posts-bottom-divider mb-3"></div>
<div class="row w-100 d-flex justify-content-center">
{% if entries('posts','types').findBySlug('default') %}
{% set posts = entries('posts').where('slug', '!=', post.slug).type('default').live().limit(5).get() %}
{% for post in posts.slice(0,4) %}
<div class="bg-white rounded h-278 overflow-hidden mx-2">
<a href="{{ post.route('view') }}"
class="fs-14 product p-0 mr-3 rounded position-relative bg-white link-dark text-decoration-none">
<div class="related-image-wrapper w-225">
{{ img( post.cover_photo.make.url ?? 'visiosoft.theme.base::images/no-image.png').class('related-image')|raw }}
</div>
<div class="product-text-area p-3">
<div class="fw-500 text-dark single-line">
{{ post.title }}
</div>
</div>
</a>
</div>
{% endfor %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}