Some cleanup in css and removed other service providers from listing

This commit is contained in:
Raghavendra Kamath
2018-03-05 12:56:04 +05:30
parent b91f16321e
commit 7b3a7645e8
9 changed files with 238 additions and 203 deletions

View File

@@ -32,7 +32,8 @@
.dark-bg {
background-color: #2E3338;
}
.left-aligned {
.left-aligned,
.text-left {
text-align: left;
}
.right-aligned {
@@ -50,6 +51,9 @@
.text-white {
color: #fff;
}
.text-normal {
font-size: 1rem;
}
.text-medium {
font-size: 1.5rem;
}
@@ -57,7 +61,8 @@
font-size: 0.5rem;
}
.centered {
margin: 0 auto;
margin-left: auto;
margin-right: auto;
}
.bold {
font-weight: bold;
@@ -71,6 +76,15 @@
.list-circle {
list-style: circle;
}
.bullet::before {
content: "\2022";
display: inline-block;
width: 1em;
font-size: 1.25rem;
}
.half-width {
max-width: 50%;
}
.border {
border: 1px solid #d1d8dd;
}
@@ -83,6 +97,65 @@
.saturate:hover {
filter: grayscale(0%);
}
/* colors */
.green-bullet::before {
color: #98d85b;
}
/* components */
.grid-of-four,
.grid-of-three {
grid-gap: 2.5rem;
display: grid;
}
.grid-of-four {
grid-template-columns: repeat(1, 1fr);
}
@media screen and (min-width: 500px) {
.grid-of-four {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 767px) {
.grid-of-four {
grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (min-width: 991px) {
.grid-of-four {
grid-template-columns: repeat(4, 1fr);
}
}
.grid-of-three {
grid-template-columns: repeat(1, 1fr);
}
@media screen and (min-width: 500px) {
.grid-of-three {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 767px) {
.grid-of-three {
grid-template-columns: repeat(3, 1fr);
}
}
.columns {
display: flex;
justify-content: space-between;
flex-direction: column;
}
@media screen and (min-width: 767px) {
.columns {
flex-direction: row;
}
}
.column {
margin-bottom: 1rem;
}
@media screen and (min-width: 767px) {
.column {
margin: 0;
}
}
.indicator,
.indicator-right {
background: none;
@@ -167,22 +240,23 @@ a:focus,
a:visited {
outline: 0;
}
.header-1,
.header-2,
.header-3 {
line-height: 1.025;
}
.header-1 {
font-size: 2.5rem;
line-height: 1.025;
}
.header-2 {
font-size: 1.5rem;
line-height: 1.025;
}
.header-3 {
font-size: 1rem;
line-height: 1.025;
}
.navbar {
padding: 1rem;
background-color: #fff;
box-shadow: 0 5px 9px 0 rgba(0, 0, 0, 0.05);
}
@media screen and (min-width: 767px) {
.navbar {
@@ -249,6 +323,9 @@ a:visited {
padding: 8rem 2.5rem;
}
}
.feature .bullet {
margin-bottom: 0.5rem;
}
.page {
padding: 0 1rem;
border-top: 1px solid #EBEFF2;
@@ -272,56 +349,6 @@ a:visited {
.list-items:hover {
box-shadow: 0 5px 9px 0 rgba(0, 0, 0, 0.05);
}
.grid-of-four,
.grid-of-three {
grid-gap: 2.5rem;
display: grid;
}
.grid-of-four {
grid-template-columns: repeat(1, 1fr);
}
@media screen and (min-width: 500px) {
.grid-of-four {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 767px) {
.grid-of-four {
grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (min-width: 991px) {
.grid-of-four {
grid-template-columns: repeat(4, 1fr);
}
}
.grid-of-three {
grid-template-columns: repeat(1, 1fr);
}
@media screen and (min-width: 500px) {
.grid-of-three {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 767px) {
.grid-of-three {
grid-template-columns: repeat(3, 1fr);
}
}
.two-column,
.three-column,
.four-column {
display: flex;
justify-content: space-between;
flex-direction: column;
}
@media screen and (min-width: 767px) {
.two-column,
.three-column,
.four-column {
flex-direction: row;
}
}
.contact-content {
max-width: 90%;
}
@@ -330,14 +357,6 @@ a:visited {
max-width: 50%;
}
}
.columns {
margin-bottom: 1rem;
}
@media screen and (min-width: 767px) {
.columns {
margin: 0;
}
}
.countries {
max-width: 100%;
}
@@ -806,12 +825,6 @@ textarea.form-control {
border-color: #5e5ec9;
text-decoration: none;
}
.screenshot,
.img-responsive {
max-width: 800px;
margin: auto;
width: auto;
}
img.blog-cover-image,
.blog-text img,
.screenshot {

View File

@@ -200,7 +200,7 @@ figure {
img {
vertical-align: middle;
border-style: none;
width: 100%;
max-width: 100%;
border-radius: 0.25em;
}

View File

@@ -41,7 +41,8 @@
background-color: @text-dark;
}
.left-aligned {
.left-aligned,
.text-left {
text-align: left;
}
@@ -65,6 +66,10 @@
color: #fff;
}
.text-normal {
font-size: 1rem;
}
.text-medium {
font-size: 1.5rem;
}
@@ -74,7 +79,8 @@
}
.centered {
margin: 0 auto;
margin-left: auto;
margin-right: auto;
}
.bold {
@@ -93,6 +99,19 @@
list-style: circle;
}
.bullet {
&::before {
content: "\2022";
display: inline-block;
width: 1em;
font-size: 1.25rem;
}
}
.half-width {
max-width: 50%;
}
.border {
border: @border;
}
@@ -108,3 +127,65 @@
filter: grayscale(0%);
}
}
/* colors */
.green-bullet {
&::before {
color: @indicator-green;
}
}
/* components */
.grid-of-four,
.grid-of-three {
grid-gap: 2.5rem;
display: grid;
}
.grid-of-four {
grid-template-columns: repeat(1, 1fr);
@media screen and (min-width: @screen-palm) {
grid-template-columns: repeat(2, 1fr);
}
@media screen and (min-width: @screen-xs) {
grid-template-columns: repeat(3, 1fr);
}
@media screen and (min-width: @screen-sm) {
grid-template-columns: repeat(4, 1fr);
}
}
.grid-of-three {
grid-template-columns: repeat(1, 1fr);
@media screen and (min-width: @screen-palm) {
grid-template-columns: repeat(2, 1fr);
}
@media screen and (min-width: @screen-xs) {
grid-template-columns: repeat(3, 1fr);
}
}
.columns {
display: flex;
justify-content: space-between;
flex-direction: column;
@media screen and (min-width: @screen-xs) {
flex-direction: row;
}
}
.column {
margin-bottom: 1rem;
@media screen and (min-width: @screen-xs) {
margin: 0;
}
}

View File

@@ -19,25 +19,27 @@ a {
}
}
.header-1,
.header-2,
.header-3 {
line-height: 1.025;
}
.header-1 {
font-size: 2.5rem;
line-height: 1.025;
}
.header-2 {
font-size: 1.5rem;
line-height: 1.025;
}
.header-3 {
font-size: 1rem;
line-height: 1.025;
}
.navbar {
padding: 1rem;
background-color: #fff;
box-shadow: 0 5px 9px 0 rgba(0, 0, 0, 0.05);
@media screen and (min-width: @screen-xs) {
padding: 1rem 2.5rem;
@@ -111,6 +113,10 @@ a {
}
}
.feature .bullet {
margin-bottom: 0.5rem;
}
.page {
padding: 0 1rem;
border-top: 1px solid @light-border-color;
@@ -137,52 +143,6 @@ a {
}
}
.grid-of-four,
.grid-of-three {
grid-gap: 2.5rem;
display: grid;
}
.grid-of-four {
grid-template-columns: repeat(1, 1fr);
@media screen and (min-width: @screen-palm) {
grid-template-columns: repeat(2, 1fr);
}
@media screen and (min-width: @screen-xs) {
grid-template-columns: repeat(3, 1fr);
}
@media screen and (min-width: @screen-sm) {
grid-template-columns: repeat(4, 1fr);
}
}
.grid-of-three {
grid-template-columns: repeat(1, 1fr);
@media screen and (min-width: @screen-palm) {
grid-template-columns: repeat(2, 1fr);
}
@media screen and (min-width: @screen-xs) {
grid-template-columns: repeat(3, 1fr);
}
}
.two-column,
.three-column,
.four-column {
display: flex;
justify-content: space-between;
flex-direction: column;
@media screen and (min-width: @screen-xs) {
flex-direction: row;
}
}
.contact-content {
max-width: 90%;
@@ -191,14 +151,6 @@ a {
}
}
.columns {
margin-bottom: 1rem;
@media screen and (min-width: @screen-xs) {
margin: 0;
}
}
.countries {
max-width: 100%;
@@ -745,13 +697,6 @@ textarea.form-control {
text-decoration: none;
}
.screenshot,
.img-responsive {
max-width: 800px;
margin: auto;
width: auto;
}
img.blog-cover-image,
.blog-text img,
.screenshot {

View File

@@ -1,8 +1,8 @@
<footer class="dark-bg">
<div class="footer">
<div class="container">
<div class="four-column left-aligned clearfix">
<div class="columns">
<div class="columns text-left clearfix">
<div class="column">
<h3 class="footer-title text-white">Industries</h3>
<ul class="list-unstyled footer-list">
<li>
@@ -31,7 +31,7 @@
</li>
</ul>
</div>
<div class="columns">
<div class="column">
<h3 class="footer-title text-white">Foundation</h3>
<ul class="list-unstyled footer-list">
<li>
@@ -60,7 +60,7 @@
</li>
</ul>
</div>
<div class="columns">
<div class="column">
<h3 class="footer-title text-white">Community</h3>
<ul class="list-unstyled footer-list">
<li>
@@ -90,7 +90,7 @@
</li>
</ul>
</div>
<div class="columns">
<div class="column">
<h3 class="footer-title text-white">Documentation</h3>
<ul class="list-unstyled footer-list">
<li>
@@ -116,19 +116,19 @@
</div>
<div class="footer-end dark-bg text-muted">
<div class="container">
<div class="align-iten-center three-column">
<div class="columns">
<div class="align-iten-center columns">
<div class="column">
<p><img class="footer-icon" src="/assets/foundation/img/erpnext-logo.svg" alt="ERPnext Icon">
&copy; <span id="year"></span> ERPNext Open Source Software Foundation.</p>
</div>
<div class="columns">
<div class="column">
<p>Find us on
<a class="secondary-link" href="https://twitter.com/erpnext" target="_blank">Twitter</a>,
<a class="secondary-link" href="https://www.facebook.com/ERPNext/" target="_blank">Facebook</a> &
<a class="secondary-link" href="https://medium.com/frappé-thoughts/" target="_blank">Medium</a>
</p>
</div>
<div class="columns">
<div class="column">
<p>Content licensed under <a class="secondary-link" href="https://creativecommons.org/licenses/by-sa/3.0/" target="_blank"> CC-BY-SA 3.0</a> | <a href="/terms" class="secondary-link">Terms of use</a>.
</p>
</div>

View File

@@ -9,7 +9,7 @@
<section class='top-spacer hero text-center about'>
<div class="container">
<img class="about-img bottom-spacer" src="/assets/foundation/img/community-colored.jpg">
<h1 class="header1">ERPNext Foundation</h1>
<h1 class="header-1">ERPNext Foundation</h1>
<p class="intro-copy text-medium">We are a Non Profit Foundation representing a community of ERPNext Users, Developers and Service Providers. Our goal is to provide a platform for the ERPNext Community to
come together, join hands and build assets to help build and enhance ERPNext around the world.</p><p class="intro-copy text-medium"> ERPNext Foundation aims to be a community driven organization and run in a transparent manner. If you want to be more involved in the ERPNext Community, read the <a href="/faq" class="secondary-link" target="_blank">FAQ</a>.
</div>

View File

@@ -9,7 +9,7 @@
<a class="button button-primary" href="/get-started.html">Get Started</a>
</div>
</section>
<section class="feature gray-bg left-aligned">
<section class="feature gray-bg text-left">
<div class="container">
<h2 class="header-1 bottom-spacer-4 text-center">Industries</h1>
<ul class="list-unstyled grid-of-four">
@@ -61,8 +61,8 @@
</section>
<section class="feature">
<div class="container">
<div class="three-column left-aligned">
<div class="columns">
<div class="columns text-left">
<div class="column">
<h1 class="header-2">Events & Meetups</h1>
<ul class="bulleted-list list-circle">
{# get first three events from portal events doctype #}
@@ -73,7 +73,7 @@
{% endfor %}
</ul>
</div>
<div class="columns">
<div class="column">
<h1 class="header-2">Help Us Improve</h1>
<ul class="bulleted-list list-circle">
<li>
@@ -87,7 +87,7 @@
</li>
</ul>
</div>
<div class="columns">
<div class="column">
<h1 class="header-2">Need Help?</h1>
<ul class="bulleted-list list-circle">
<li>

View File

@@ -4,42 +4,40 @@
{% macro gold_member(m) %}
<div class="media {{ 'text-muted' if m.placeholder else '' }}" style="cursor: pointer;" onclick="location.href='{{ m.route }}'">
<div class="media-left">
<a href="{{ m.route }}">
<img class="thumb-small media-object" src="{{ m.image or '/assets/foundation/img/gold.png' }}">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">{{ m.title }}</h4>
{{ m.introduction }}
</div>
<div class="media-left">
<a href="{{ m.route }}">
<img class="thumb-small media-object" src="{{ m.image or '/assets/foundation/img/gold.png' }}">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">{{ m.title }}</h4>
{{ m.introduction }}
</div>
</div>
{% endmacro %}
{% macro silver_member(m) %}
<div class="box clickable {{ 'text-muted' if m.placeholder else '' }}"
style="cursor: pointer;" onclick="location.href='{{ m.route }}'">
<h4>{{ m.title }}</h4>
<p>{{ m.introduction | truncate(140) }}</p>
</div>
<div class="box clickable {{ 'text-muted' if m.placeholder else '' }}"
style="cursor: pointer;" onclick="location.href='{{ m.route }}'">
<h4>{{ m.title }}</h4>
<p>{{ m.introduction | truncate(140) }}</p>
</div>
{% endmacro %}
{% macro show_member(s) %}
<div class='individual-member columns'>
<h3><a class='secondary-link bold' href="/{{ s.route }}">{{ s.title and s.title[:25] }}</a></h3>
<p>
{{ s.introduction and s.introduction | truncate(140) }}
</p>
</div>
<div class='individual-member column'>
<h3><a class='secondary-link bold' href="/{{ s.route }}">{{ s.title and s.title[:25] }}</a></h3>
<p>
{{ s.introduction and s.introduction | truncate(140) }}
</p>
</div>
{% endmacro %}
{% block page_content %}
{% if form_dict.country %}
{% endif %}
<section class="gold bottom-spacer-4">
<h2 class='media-heading'>Gold Members</h2>
{% for m in gold_members %}
{{ gold_member(m) }}
{{ gold_member(m) }}
{% endfor %}
{% if has_gold_member %}
<p class="top-spacer text-center"><a class='text-muted' href='/members'>
@@ -48,46 +46,41 @@
</section>
<section class="silver bottom-spacer-4">
<h2 class='media-heading'>Silver Members</h2>
<div class="grid-of-three">
{% for m in silver_members %}
<h2 class='media-heading'>Silver Members</h2>
<div class="grid-of-three">
{% for m in silver_members %}
{{ silver_member(m) }}
{% endfor %}
</div>
{% endfor %}
</div>
{% if has_silver_member %}
<p class="top-spacer text-center"><a class='text-muted' href='/members'>
Become a Silver Member and get your company featured here</a></p>
<p class="top-spacer text-center"><a class='text-muted' href='/members'>
Become a Silver Member and get your company featured here</a></p>
{% endif %}
</section>
<section class="bottom-spacer-4">
<h2>Individual Members</h2>
<div class="grid-of-three">
{% for s in individual_members %}
{{ show_member(s) }}
{{ show_member(s) }}
{% endfor %}
</div>
{% if has_individual_member %}
<p class="top-spacer text-center"><a class='text-muted' href='/members'>
Become an Individual Member and get your company featured here</a></p>
{% endif %}
</section>
{% if form_dict.country %}
<section class="bottom-spacer-4">
<h2>Other Service Providers</h2>
<div class="grid-of-three">
{% for s in service_providers %}
{{ show_member(s) }}
{% endfor %}
</div>
</section>
{% else %}
{% if not form_dict.country %}
<section>
<h2>Select by country</h2>
<div class='four-column flex-wrap'>
{% for c in countries %}
<div class='countries columns'>
<p>
<div class='columns flex-wrap'>
{% for c in countries %}
<div class='countries column'>
<p>
<a class="secondary-link" href="/service-providers?country={{ c[0] }}">{{ c[0] }} ({{ c[1] }})</a>
</p>
</p>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</section>
{% endif %}
{% endblock %}

View File

@@ -56,12 +56,15 @@ def get_context(context):
filters['member'] = ('in', individual_members)
context.individual_members = frappe.get_all('Service Provider',
'title, introduction, `image`, route', filters)
if context.individual_members:
context.has_individual_member = 1
else:
context.individual_members = [dict(
context.individual_members.append(dict(
title='Your Company',
introduction='Become an invidual member to list here',
route='/members'
)]
))
if context.form_dict.country:
context.title = 'ERPNext Service Providers in {0}'.format(context.form_dict.country)