FreakU
/
Retrospring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update frontpage styling and content

This commit is contained in:
pixeldesu 2015-09-20 15:16:24 +02:00
parent e510a6e8b4
commit 08644306fc
4 changed files with 246 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/application.js.erb.coffee
View File

@ -1,6 +1,7 @@
#= require jquery
#= require jquery_ujs
#= require jquery.turbolinks
#= require jquery.arctic_scroll
#= require turbolinks
#= require bootstrap
#= require twemoji
@ -72,6 +73,7 @@ _ready = ->
particleground document.getElementById('particles'),
dotColor: bodyColor
lineColor: bodyColor
density: 23000
if twemoji?
twemoji.parse document.body,
@ -84,6 +86,8 @@ _ready = ->
else
''.concat(options.base, options.size, '/', icon, options.ext)
$('.arctic_scroll').arctic_scroll speed: 500
$(document).ready _ready
$(document).on 'page:load', _ready

102
app/assets/stylesheets/base.css.scss
View File

@ -162,6 +162,92 @@ body {
border-bottom-right-radius: 2px;
}
.frontpage {
margin-top: -50px;
height: 100vh;
display: table;
}
.frontpage-scroll {
display: block;
position: absolute;
bottom: 0;
margin: 0 auto;
padding: 20px;
text-align: center;
z-index: 1000;
font-size: 32px;
width: 100%;
}
.frontpage-content {
display: table-cell;
vertical-align: middle;
}
.frontpage-features {
padding-top: 20px;
padding-bottom: 10px;
}
.features-heading {
margin-bottom: 20px;
}
.frontpage-fluid {
background-color: darken($navbar-inverse-bg, 10%);
color: #fff;
a {
color: #fff;
font-weight: bold;
&:hover {
opacity: 0.8;
}
}
p {
margin: 20px;
text-align: center;
}
}
.frontpage-heading {
margin-top: 0px;
}
#content {
padding-bottom: 30px;
}
#register {
padding: 20px;
}
.register-now {
margin: 10px;
}
.btn-register {
opacity: 1 !important;
background: transparent;
color: #fff;
border: 4px #fff solid;
border-radius: 4px;
transition: background-color .25s ease-in-out;
&:hover {
background-color: #fff;
color: darken($navbar-inverse-bg, 10%) !important;
transition: background-color .25s ease-in-out;
}
}
.lead {
margin-bottom: 3px;
}
.particle-jumbotron {
padding: 0px;
overflow: hidden;
@ -190,6 +276,15 @@ body {
display: block;
}
.colored-icon:before {
color: $brand-primary;
}
.colored-icon {
padding-left: 3px;
padding-right: 5px;
}
.heading-showcase {
margin-top: 5px;
}
@ -201,3 +296,10 @@ body {
.discover {
padding-top: 20px;
}
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}

124
app/views/static/front.html.haml
View File

@ -1,32 +1,116 @@
- provide(:title, "#{APP_CONFIG['site_name']}")
.jumbotron.j2-jumbo.text-center.particle-jumbotron
.jumbotron.j2-jumbo.text-center.particle-jumbotron.frontpage
.frontpage-scroll
%a.arctic_scroll{href: "#content", data: {offset: "-80"} }
%i.fa.fa-chevron-down
#particles
.particle-content
.particle-content.frontpage-content
.container
= render 'layouts/messages'
%h1= APP_CONFIG['site_name']
%p= t 'views.front.subtitle'
%p
%a.btn.btn-primary.btn-lg{href: url_for(new_user_registration_path)}
%a.btn.btn-register.btn-lg{href: url_for(new_user_registration_path)}
Register now
%small
Already a member?
= link_to 'Sign in', new_user_session_path
.container-fluid
.row.text-center
.col-md-4.col-sm-4.col-xs-12
.icon-showcase
%i.fa.fa-comments
%h3.heading-showcase= t 'views.front.ask.title'
%p= t('views.front.ask.desc', app_title: APP_CONFIG['site_name'])
.col-md-4.col-sm-4.col-xs-12
.icon-showcase
%i.fa.fa-users
%h3.heading-showcase= t 'views.front.follow.title'
%p= t 'views.front.follow.desc'
.col-md-4.col-sm-4.col-xs-12
.icon-showcase
%i.fa.fa-share-square-o
%h3.heading-showcase= t 'views.front.share.title'
%p= t 'views.front.share.desc'
.container-fluid#content
.container.text-center
%h1.frontpage-heading= "What is #{APP_CONFIG['site_name']}?"
%p.lead
A
%abbr{title: "Question and Answer"} Q/A
based social network
%p Most of the people already know how these sorts of networks already work. You have a profile and other users (or even anonymous people without accounts) can ask you any question to find out more about you, so can you do the same with others. Finding friends with the same interests, people that share your opinion (and people that probably don't), you can find everything here!
%p.lead
But what makes
= APP_CONFIG['site_name']
special?
%p
= APP_CONFIG['site_name']
tries to take aspects from other popular or now gone platforms and combine them to get the best result possible. Also, we take in the ideas and feedback of our community so we can build a service that's even closer to being exactly the service people want to use!
.container.frontpage-features
%h2.features-heading.text-center Awesome Features
.row
.col-md-4.col-sm-4.col-xs-12
%h3.heading-showcase
%i.fa.fa-fw.fa-comments.colored-icon
Discussion
%p= "With #{APP_CONFIG['site_name']}, you can ask and answer questions from other users as well as receive anonymous questions. Want to know something? Keep the conversation alive with interactive comments."
.col-md-4.col-sm-4.col-xs-12
%h3.heading-showcase
%i.fa.fa-fw.fa-user-plus.colored-icon
Following
%p
Following users allows you to get a personalized feed of all people you want to know more about. You can also send a question to all your followers at once!
.col-md-4.col-sm-4.col-xs-12
%h3.heading-showcase
%i.fa.fa-fw.fa-share-square-o.colored-icon
Sharing
%p
Want to share your answer to a question so that more people read it? With a simple click on the answer button, your answer is shared wherever you want!
.row
.col-md-4.col-sm-4.col-xs-12
%h3.heading-showcase
%i.fa.fa-fw.fa-users.colored-icon
Groups
%p
Want to ask a question to a specific set of people? No problem! Set up unique groups of users and send them questions apart from everyone else.
.col-md-4.col-sm-4.col-xs-12
%h3.heading-showcase
%i.fa.fa-fw.fa-image.colored-icon
Images
%p
Express yourself with images and upload an avatar and a header of your liking. And soon you'll be able to attach images to answers and questions as well!
.col-md-4.col-sm-4.col-xs-12
%h3.heading-showcase
%i.fa.fa-fw.fa-paint-brush.colored-icon
Themes
%p
Don't like the default purple or don't like light interfaces in general? On
= APP_CONFIG['site_name']
you can change every color aspect of the site with Themes!
.row
.col-md-4.col-sm-4.col-xs-12
%h3.heading-showcase
%i.fa.fa-fw.fa-globe.colored-icon
Open Source
%p
You heard it right!
= APP_CONFIG['site_name']
and all of it's core components are open source! Everyone can help and improve the service!
.col-md-4.col-sm-4.col-xs-12
%h3.heading-showcase
%i.fa.fa-fw.fa-eye-slash.colored-icon
No Ads
%p
We don't like them ourselves, really.
= APP_CONFIG['site_name']
just runs with community funding over
%a{href: "http://patreon.com/retrospring"} Patreon
which is way better than displaying annoying stuff.
.col-md-4.col-sm-4.col-xs-12
%h3.heading-showcase
%i.fa.fa-fw.fa-user-secret.colored-icon
Your Data is yours
%p
Today the most precious things on the internet is your data.
= APP_CONFIG['site_name']
doesn't sell any data that is collected. It remains encrypted on our servers!
.container-fluid.frontpage-fluid
%p
Any questions? Ask us on
%a{href: "https://twitter.com/retrospringnet"} Twitter
or visit one of the administrator profiles you can find on the
%a{href: about_path} About page!
.container.text-center#register
%h2 What are you waiting for?
%p
Registering and using the site is free forever and takes less than 5 minutes!
%p
%a.btn.btn-primary.btn-lg.register-now{href: url_for(new_user_registration_path)}
Register now
= render "shared/links"

36
vendor/assets/javascripts/jquery.arctic_scroll.js vendored Normal file
View File

@ -0,0 +1,36 @@
(function ($) {
$.fn.arctic_scroll = function (options) {
var defaults = {
elem: $(this),
speed: 500,
scroll_selector: 'html,body'
};
var options = $.extend(defaults, options),
to_scroll = options.scroll_selector,
ua = $.browser;
/*
if ( ua.msie && ua.version.slice(0,1) == "8" ) {
to_scroll = window;
} else if ( ua.msie && ua.version.slice(0,1) == "7" ) {
to_scroll = window;
}
*/
options.elem.click(function(event){
event.preventDefault();
var offset = ($(this).attr('data-offset')) ? $(this).attr('data-offset') : false,
position = ($(this).attr('data-position')) ? $(this).attr('data-position') : false;
if (offset) {
var toMove = parseInt(offset);
$(options.scroll_selector).stop(true, false).animate({scrollTop: ($(this.hash).offset().top + toMove) }, options.speed);
} else if (position) {
var toMove = parseInt(position);
$(options.scroll_selector).stop(true, false).animate({scrollTop: toMove }, options.speed);
} else {
$(options.scroll_selector).stop(true, false).animate({scrollTop: ($(this.hash).offset().top) }, options.speed);
}
});
};
})(jQuery);