Skip to content

Commit

Permalink
Merge pull request #22 from C-Anirudh/project_page
Browse files Browse the repository at this point in the history 
modified project page view
  • Loading branch information
@aswinshenoy
aswinshenoy committed Mar 7, 2019
2 parents d2b06a9 + b9aa313 commit 9d8095d
Show file tree
Hide file tree
Showing 2 changed files with 215 additions and 33 deletions.
119 changes: 117 additions & 2 deletions pages/static/pages/styles/post.sass
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
@import url('https://fonts.googleapis.com/css?family=PT+Serif')

.tagline
font-size: calc(1rem + 0.5vw)
.post-card
padding: 2rem
box-shadow: 8px 10px 20px 0 rgba(46,61,73,.15)
Expand All @@ -21,3 +19,120 @@
border-radius: 100vh
margin-right: 0.5rem

$primary-color: #ffc107

.tab
min-height: 100vh
padding: 5vh 2vw


@media (max-width: 720px)
#section-switcher
position: fixed!important
bottom: 0
right: 0
left: 0
top: unset!important

#cover
background-color: $primary-color
display: flex
align-items: center
justify-content: center
min-height: 60vh
text-shadow: 0.2rem 0.3rem rgba(0,0,0,0.3)

#title-block
display: flex
align-items: center
justify-content: center
min-height: 50vh

.name
max-width: 720px
img
width: 200px!important
height: 200px!important
border: 0.3rem solid white
box-shadow: 0.2rem 0.3rem rgba(0,0,0,0.3)
margin: 0.5rem

h1
font-size: calc(2rem + 1vw)
margin: 0

.tagline
font-size: calc(1rem + 0.5vw)


#section-switcher
background: #fff
box-shadow: 1px 1px 2px #222222
display: flex
text-align: center
justify-content: center
z-index: 3000
position: sticky
top: 0

a
display: inline-block
padding: 0.5rem 3vw
font-weight: 900
border-left: 1px solid
border-right: 1px solid
border-color: #ddd
font-size: calc(0.8rem + 0.4vw)
img
width: 3vmax
min-width: 36px
padding: 0.2rem
a:hover
background-color: #eeee


#description-tab
h2
margin-top: 2rem
margin-left: 2vw
font-size: calc(1.5rem + 1vw)
img
max-width: 45px
margin-right: 1rem
p
font-size: 100%
font-weight: 300
span
margin: 0.3rem

.desc
padding: 0.5rem

#gallery-tab, #members-tab
a
text-decoration: none
color: inherit

a:hover
text-decoration: none
.blog-post, .project-card
padding: 0!important
.content
padding: 1.5rem
h3
font-size: calc(1.5rem + 1vw)

#members
a
color: inherit
a:hover
text-decoration: none

.section-card
box-shadow: 8px 10px 20px 0 rgba(46,61,73,.15)
margin: 1.5vw 1vw
text-align: left

#full-img
max-height: 100%
min-width: 100%
129 changes: 98 additions & 31 deletions templates/project/project.haml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,37 +4,104 @@
{% block title %} {{project.name}} | Project {% endblock %}
{% block description %}AmFOSS (FOSS@Amrita) is one the leading student FOSS Communities in India, based in Amrita Vishwa Vidyapeetham, Amritapuri. {% endblock %}
{% block styles %}
%link{:rel => "stylesheet", :href =>"{% sass_src 'pages/styles/post.sass' %}" }
<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
%link{:rel => "stylesheet", :href =>"{% sass_src 'pages/styles/post.sass' %}" }
{% endblock %}
{% block content %}
%section{:class=>"page-cover"}
%div
%h1 {{project.name}}
.tagline {{project.tagline}}
%section.row.m-0.p-2
.col-md-9.py-4
<img src="{{project.cover.url}}" class="featured_image">
.post-card.bg-white
{{project.detail|safe}}
.col
.section-card.list.p-0.bg-white
.bg-primary.p-2
%h3.m-2 Team Members
%div{:class=>"point px-2"}
{% for m in team %}
<a href="/@{{m.user.username}}">
.row.m-0
.col-3.p-0
<img src="{{m.avatar.url}}" class="rounded-circle">
.col.p-2.d-flex.align-items-center
%h5 {{m.first_name}} {{m.last_name}}
</a>
{% endfor %}
.section-card.bg-primary.p-3
{% if socialProfiles %}
.social-links
{% for l in socialProfiles %}
<a href="{{l.link}}" style="color: {{l.portal.color}}" class="{{l.portal.icon}}"></a>
{% endfor %}
{% endif %}
{% if project %}

.container-fluid
.row
<section id="cover" style="background-color:#ffc107" >
<div class="col-sm-4">
<img src="/{{ project.cover }}" id="full-img" class="rounded" >
</div>
<div class="col-sm-8">
%h1 {{project.name}}
.tagline {{project.tagline}}
.social-links
{% if socialProfiles %}
{% for l in socialProfiles %}
<a href="{{l.link}}" style="color: {{l.portal.color}}" class="{{l.portal.icon}}"></a>
{% endfor %}
{% endif %}
</div>
</section>

<nav id='section-switcher'>
<a id='description-tab-button'>
<img src='/static/pages/images/icons/profile.png'>
<span>Description</span>
</a>
<a id='gallery-tab-button'>
<img src='/static/pages/images/icons/portfolio.png'>
<span>Gallery</span>
</a>
<a id='members-tab-button'>
<img src='/static/pages/images/icons/about.png'>
<span>Members</span>
</a>
</nav>

%section.tab#description-tab
%section.my-4.container
.post-card.bg-white
{{project.detail|safe}}

%section.tab#gallery-tab
%section.gallery
.row.m-0
{% for p in project.album.photos.all %}
.col-sm-3.col-md-4.col-6.p-2
.section-card.p-0
<img src="/{{p.image}}">
{% endfor %}
{

%section.tab#members-tab
.row.m-0#members.p-3
{% for m in team %}
<div class="col-lg-3 col-md-4 col-6 p-2" tags="{{m.first_name.lower }} {{ m.last_name.lower }} {{m.user.username.lower}}">
<a href="/@{{m.user.username}}">
.section-card.bg-white.p-0.anime.zoomIn.m-1
<img src="/{{m.avatar}}" class="cover">
.content
%h4 {{m.first_name}} {{m.last_name}}
{% if m.tagline %}
.tagline {{m.tagline}}
{% else %}
.tagline {{m.role}}
{% endif %}
</a>
</div>
{% endfor %}
{% endif %}


<script>
$("#description-tab").show();
$("#gallery-tab").hide();
$("#members-tab").hide();

$("#description-tab-button").click(function() {
$("#description-tab").show();
$("#gallery-tab").hide();
$("#members-tab").hide();
});

$("#gallery-tab-button").click(function() {
$("#description-tab").hide();
$("#gallery-tab").show();
$("#members-tab").hide();
});

$("#members-tab-button").click(function() {
$("#description-tab").hide();
$("#gallery-tab").hide();
$("#members-tab").show();
});

</script>

{% endblock %}

0 comments on commit 9d8095d

Please sign in to comment.