mirror of
https://github.com/openclassify/openclassify.git
synced 2026-01-11 18:01:10 -06:00
Merge pull request #1278 from openclassify/metehancelik
blog design for base-theme
This commit is contained in:
commit
6fbe43a444
168
addons/default/visiosoft/base-theme/resources/css/post.scss
Normal file
168
addons/default/visiosoft/base-theme/resources/css/post.scss
Normal 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;
|
||||
}
|
||||
@ -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',
|
||||
];
|
||||
@ -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',
|
||||
];
|
||||
@ -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>
|
||||
@ -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 %}
|
||||
@ -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 %}
|
||||
Loading…
Reference in New Issue
Block a user