From 1c402435565907e99d4445297841e7a8f3ec8eac Mon Sep 17 00:00:00 2001
From: Marcela Ribeiro de Oliveira <mro15@inf.ufpr.br>
Date: Thu, 15 Oct 2015 11:05:26 -0300
Subject: [PATCH] page sign up
---
app/assets/stylesheets/application.scss | 362 ++++++++++++++----------
app/views/welcome/collection.html.erb | 8 +-
app/views/welcome/signup.html.erb | 40 +++
config/routes.rb | 1 +
4 files changed, 252 insertions(+), 159 deletions(-)
create mode 100644 app/views/welcome/signup.html.erb
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index d5c9dd2f..da093240 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -24,40 +24,40 @@ $link-grey: #343D3E;
//// HTML/BODY
html,
body {
- margin:0;
- padding:0;
- height:100%;
+ margin:0;
+ padding:0;
+ height:100%;
font-size: 100%;
- font-weight: 300;
+ font-weight: 300;
font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
- margin: 0;
- font-weight: 300;
+ margin: 0;
+ font-weight: 300;
}
a, a:focus, a:hover {
- font-weight: 400;
- color: #000;
- text-decoration: none;
+ font-weight: 400;
+ color: #000;
+ text-decoration: none;
}
.media-heading {
- font-weight: 400;
+ font-weight: 400;
}
.caret {
- border-left: 7px solid transparent;
- border-right: 7px solid transparent;
- border-top: 7px solid #000000;
+ border-left: 7px solid transparent;
+ border-right: 7px solid transparent;
+ border-top: 7px solid #000000;
}
.caret-up {
- transform: rotate(180deg);
+ transform: rotate(180deg);
}
.caret-align-right {
- position: absolute;
+ position: absolute;
left: 90%;
top: 45%;
}
@@ -73,49 +73,48 @@ header {
// barra brasil
- .barra-brasil {
+ .barra-brasil {
background:#F1F1F1;
height: 32px;
padding:0 0 0 10px;
display:block;
-
#wrapper-barra-brasil {
max-width: 100% !important;
}
}
- .brasil-flag{
- height: 100% !important;
- }
+ .brasil-flag{
+ height: 100% !important;
+ }
// bar with logo, search and user info
- .search-bar {
- color: #FFF;
- background-color: #2178F5;
- padding: 0px;
+ .search-bar {
+ color: #FFF;
+ background-color: #2178F5;
+ padding: 0px;
padding-top: 8px;
- margin: 0px;
+ margin: 0px;
// logo
- .logo-container {
- text-align: left;
- }
- .logo {
+ .logo-container {
+ text-align: left;
+ }
+ .logo {
margin-top: 10px;
padding: 0;
- text-align: center;
- float: left;
- width: 165px;
- h3 {
- margin-top: 10px;
- font-weight: 400;
- }
+ text-align: center;
+ float: left;
+ width: 165px;
+ h3 {
+ margin-top: 10px;
+ font-weight: 400;
+ }
a {
- color: #FFF;
+ color: #FFF;
}
- }
- .logo-image {
- width: 100px;
- }
+ }
+ .logo-image {
+ width: 100px;
+ }
// accessibility
.search-accessibility {
margin-top: 25px;
@@ -136,8 +135,8 @@ header {
border-top-left-radius: 7px;
border-color: #FFF;
-webkit-box-shadow: none;
- -moz-box-shadow: none;
- box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
height: 40px;
padding-left: 20px;
font-size: 24px;
@@ -163,14 +162,14 @@ header {
}
}
// user info
- .status-text {
+ .status-text {
margin-top: 20px;
- // font-size: 20px;
- text-align: right;
+ // font-size: 20px;
+ text-align: right;
- h2, h4 {
- margin-top: 5px;
- }
+ h2, h4 {
+ margin-top: 5px;
+ }
.media-heading {
// font-size: 32px;
@@ -184,8 +183,8 @@ header {
.quit-link {
color: #FF2602;
}
- }
- }
+ }
+ }
// navbar
.navigation {
@@ -194,24 +193,24 @@ header {
.nav {
height: 50px;
- h3 {
- margin-top: 13px;
- }
+ h3 {
+ margin-top: 13px;
+ }
.nav-button {
min-width: 130px;
height: 100%;
- padding-left: 15px;
- padding-right: 10px;
+ padding-left: 15px;
+ padding-right: 10px;
// font-size: 20px;
- color: #343D3E;
+ color: #343D3E;
font-weight: 500 !important;
- a {
- @extend h3;
- padding: 0;
- color: #343D3E;
- }
+ a {
+ @extend h3;
+ padding: 0;
+ color: #343D3E;
+ }
}
.nav-button-first {
@@ -219,7 +218,7 @@ header {
}
.divider {
width: 2px;
- margin-left: 3px;
+ margin-left: 3px;
height: 100%;
background-color: #FFF;
}
@@ -237,25 +236,25 @@ header {
//// FOOTER
footer {
- width:100%;
- height:100px;
- position:relative;
- bottom:0;
- left:0;
+ width:100%;
+ height:100px;
+ position:relative;
+ bottom:0;
+ left:0;
padding-top: 50px;
- border-width: 0px;
- color: #FFF;
+ border-width: 0px;
+ color: black;
- .main{
- background-color: #313131;
- padding: 16px 0px 0px 0px;
+ .main{
+ background-color: #313131;
+ padding: 16px 0px 0px 0px;
min-height: 256px;
- }
+ }
- .footerbar{
- padding: 16px;
- background-color: #080808;
- }
+ .footerbar{
+ padding: 16px;
+ background-color: #AAB1AD;
+ }
}
.starRating:not(old){
@@ -298,98 +297,151 @@ footer {
td.stars { width: 22%; }
td.visualis { width: 22%; }
-table.tipo1 td { width: 52%; height: 33px;}
+table.tipo1 td { width: 52%; height: 33px;}
table.tipo1 p{ font-size: 15px; font-weight: bold; }
////////////////////////////////////////////////////////////////////////////////
/* Alto Contraste*/
.contraste{
- background-color: black !important;
- color: white;
- a{
- color: yellow;
- }
- .search-bar{
- color: white !important;
- }
- #myCarousel{
- a{
- color: white !important;
- }
- }
-
- #search{
- .form-control{
- background-color: black !important;
- color:white;
- }
- }
- #subject-highlight{
- background-color: black !important;
- }
-
- .field{
- input{
- color: black !important;
- }
- }
- .actions{
- input{
- color: black !important;
- }
- }
-
- .panel-wrapper{
- background-color: black !important;
- border: 2px solid white;
- .btn{
- background-color: black !important;
- border: 5px solid white;
- border-style: outset;
- }
- }
+ background-color: black !important;
+ color: white;
+ a{
+ color: yellow;
+ }
+ .search-bar{
+ color: white !important;
+ }
+ #myCarousel{
+ a{
+ color: white !important;
+ }
+ }
+
+ #search{
+ .form-control{
+ background-color: black !important;
+ color:white;
+ }
+ }
+ #subject-highlight{
+ background-color: black !important;
+ }
+
+ .field{
+ input{
+ color: black !important;
+ }
+ }
+ .actions{
+ input{
+ color: black !important;
+ }
+ }
+
+ .panel-wrapper{
+ background-color: black !important;
+ border: 2px solid white;
+ .btn{
+ background-color: black !important;
+ border: 5px solid white;
+ border-style: outset;
+ }
+ }
}
.menu-bar-contrast{
- background-color: black !important;
- border-top: 2px solid white;
- border-bottom: 2px solid white;
- li{
- color: white !important;
- a{
- color:white !important;
- }
- a:hover{
- background-color: #1E1E1E !important;
- }
- a:active{
- background-color: #1E1E1E !important;
- }
- a:focus{
- background-color: #1E1E1E !important;
- }
- .caret{
- border-top:7px white solid;
- }
- }
- .divider{
- background-color: white;
- }
- .dropdown-menu{
- background-color: black;
- }
+ background-color: black !important;
+ border-top: 2px solid white;
+ border-bottom: 2px solid white;
+ li{
+ color: white !important;
+ a{
+ color:white !important;
+ }
+ a:hover{
+ background-color: #1E1E1E !important;
+ }
+ a:active{
+ background-color: #1E1E1E !important;
+ }
+ a:focus{
+ background-color: #1E1E1E !important;
+ }
+ .caret{
+ border-top:7px white solid;
+ }
+ }
+ .divider{
+ background-color: white;
+ }
+ .dropdown-menu{
+ background-color: black;
+ }
}
.words{
- color:white;
+ color:white;
}
.selec{
- color:black;
+ color:black;
}
.fundo{
- background: black;
+ background: black;
+}
+.right-edge { padding: 0px 45px; }
+
+.left-edge { position: relative; top: 30px; }
+
+.left-edge { left: 0px; }
+
+.right-button { padding: 0px 60px; }
+
+.logo-footer{
+ float: left;
+ margin-right: 1%;
+ margin-left: 1%;
+ width: 18%;
+
+}
+.grey-panel{
+ background-color: #EEEEEE;
+ width: 100;
+ padding: 40px;
+ margin: 25px;
}
-.set-Colecao{
- color: black;
+.but {
+display: inline-block;
+background-color: #1676bc;
+color: #fff;
+padding: 8px 26px;
+text-decoration: none;
+box-sizing: border-box;
+font-family: Helvetica;
+font-weight: bold;
+font-size: 16px;
+border: 0px;
+}
+
+.but-shadow {
+box-shadow: 1px 1px 1px #999;
+}
+
+.but-rc {
+border-radius: 4px;
+}
+
+.center_data{
+ text-align:center;
+}
+
+.thumb{
+ width:250px;
+ float: left;
+ margin-left: 5px;
+ border: solid 1px #ccc;
+}
+input.chk{
+margin-top:5px;
+margin-left:5px;
}
diff --git a/app/views/welcome/collection.html.erb b/app/views/welcome/collection.html.erb
index 28fa4d13..b08d37bf 100644
--- a/app/views/welcome/collection.html.erb
+++ b/app/views/welcome/collection.html.erb
@@ -13,10 +13,10 @@
<div class="container-fluid">
<a class="navbar-brand" href="#">x arquivo(s) selecionado(s)</a>
<ul class="nav navbar-nav navbar-right">
- <li><a href="#"><%= image_tag image_path("icons/collection1.png"), class: "logo-image",size: "35x28" %> Salvar no computador</a></li>
- <li><a href="#"><%= image_tag image_path("icons/collection1.png"), class: "logo-image",size: "35x28" %> Copiar para</a></li>
- <li><a href="#"><%= image_tag image_path("icons/collection1.png"), class: "logo-image",size: "35x28" %> Mover para</a></li>
- <li><a href="#"><%= image_tag image_path("icons/collection1.png"), class: "logo-image",size: "35x28" %> Remover da coleção</a></li>
+ <li><a href="#"><span class="left-edge"><%= image_tag image_path("icons/collection1.png"), class: "logo-image",size: "35x28" %></span> Salvar no <br>computador</br></a></li>
+ <li><a href="#"><span class="left-edge"><%= image_tag image_path("icons/collection1.png"), class: "logo-image",size: "35x28" %></span> Copiar <br>para</br></a></li>
+ <li><a href="#"><span class="left-edge"><%= image_tag image_path("icons/collection1.png"), class: "logo-image",size: "35x28" %></span> Mover <br>para</br></a></li>
+ <li><a href="#"><span class="left-edge"><%= image_tag image_path("icons/collection1.png"), class: "logo-image",size: "35x28" %></span> Remover da <br>coleção</br> </a></li>
</ul>
</div>
</nav>
diff --git a/app/views/welcome/signup.html.erb b/app/views/welcome/signup.html.erb
new file mode 100644
index 00000000..dbf4419f
--- /dev/null
+++ b/app/views/welcome/signup.html.erb
@@ -0,0 +1,40 @@
+ <div class="container">
+ <div class="row">
+ <div class="col-md-12">
+ <div class="grey-panel">
+ <div class="center_data">
+ <h2 ><FONT COLOR="#343D3E" FACE="Arial">Cadastre-se</font></h2><br/>
+ <%= image_tag image_path("user-anon.png")%><br/>
+ <font color="#1676bc">adicionar foto</font><br/></br></div>
+ <div class="col-md-10">
+ <p style="line-height: 170%"><div class="col-md-10"><span class="pull-right">Nome:
+ <input type="text" value="nome completo" size="35"></span></div><br/></p>
+ <p style="line-height: 15%"><br/></p>
+ <p style="line-height: 170%"><div class="col-md-10"><span class="pull-right">Email:
+ <input type="text" value="email@email.com" size="35"></span></div><br/></p>
+ <p style="line-height: 15%"><br/></p>
+ <p style="line-height: 170%"><div class="col-md-10"><span class="pull-right">Senha:
+ <input type="password" value="*********" size="35" ></span></div><br/></p>
+ <p style="line-height: 15%"><br/></p>
+ <p style="line-height: 170%"><div class="col-md-10"><span class="pull-right">Confirmar senha:
+ <input type="password" value="*********" size="35" ></span></div><br/><br/></p>
+ </div>
+
+ <div class="container-fluid">
+ <div class="col-md-offset-3 col-md-5">
+ <div class="center_data">
+ <div class="col-md-6">
+ <br/><span class="pull-right">Já possui conta?</span><br/>
+ <span class="pull-right"><%= link_to 'Entre aqui', search_path, {:style=>'color:#1676bc'} %></span>
+ </div>
+ <div class=" col-md-5">
+ <br/><span class="pull-right"><button class="but but-shadow but-rc">Cadastrar</button></span><br/>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/config/routes.rb b/config/routes.rb
index 60cac5a8..c47237ea 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -57,4 +57,5 @@ Rails.application.routes.draw do
get '/search' => 'search#index', as: 'search'
get '/subject/:id' => 'welcome#subject', as:'subject_index'
get '/collection' => 'welcome#collection'
+ get '/signup' => 'welcome#signup'
end
--
GitLab