32 |
38 |
33 |
37 |
34 | <%= yield %>
35 |
36 | Progress Bar
2 |Mesmo esquema do Bootstrap. Inserimos apenas uma tag B dentro do div bar para mostrar a indicação de status de progresso.
3 | <%= content_for_clippy do %> 4 |
5 |
6 |
7 | <% end %>
8 | 9 |
Esse atributo STYLE que define a largura da barra de progresso é feito via Javascript e você precisa fazer isso dependendo da sua necessidade.
10 | 11 |
12 | <%= clippy(yield(:code)) %>
13 |
14 |
--------------------------------------------------------------------------------
/config/initializers/inflections.rb:
--------------------------------------------------------------------------------
1 | # Be sure to restart your server when you modify this file.
2 |
3 | # Add new inflection rules using the following format
4 | # (all these examples are active by default):
5 | # ActiveSupport::Inflector.inflections do |inflect|
6 | # inflect.plural /^(ox)$/i, '\1en'
7 | # inflect.singular /^(ox)en/i, '\1'
8 | # inflect.irregular 'person', 'people'
9 | # inflect.uncountable %w( fish sheep )
10 | # end
11 | #
12 | # These inflection rules are supported but not enabled by default:
13 | # ActiveSupport::Inflector.inflections do |inflect|
14 | # inflect.acronym 'RESTful'
15 | # end
16 |
--------------------------------------------------------------------------------
/app/assets/javascripts/browser-detect.js:
--------------------------------------------------------------------------------
1 | // Identificando os browsers...
2 | if ($.browser.msie) {
3 | if(parseInt($.browser.version) == 9){
4 | $("html").addClass("ie9"); // Para IE9
5 | } else if (parseInt($.browser.version) == 8){
6 | $("html").addClass("ie8"); // Para IE8
7 | } else if(parseInt($.browser.version) == 7){
8 | $("html").addClass("ie7"); // Para IE7
9 | } else if(parseInt($.browser.version) == 6){
10 | $("html").addClass("ie6"); // Para IE6
11 | }
12 | } else if ($.browser.mozilla) {
13 | $("html").addClass("gecko");
14 | } else if ($.browser.webkit) {
15 | $("html").addClass("webkit");
16 | }
17 |
--------------------------------------------------------------------------------
/app/views/manual/mobile.html:
--------------------------------------------------------------------------------
1 | Mobile e Responsividade
2 |São 3 breakpoints principais: 480px, para mobiles. 990px para telas com menos de 1024. 1180px para telas grandes. Ou seja, os layouts com Locaweb Style já tem versões responsivas de fábrica. Você não precisa fazer para que sua aplicação esteja preparada para ser visualizada em mobiles.
3 | 4 |Abaixo veja um exemplo de como o layout seria visto em um smartphone com uma tela de 320px x 480px.
5 |6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /app/assets/stylesheets/passwordStrength.css: -------------------------------------------------------------------------------- 1 | .np0{ 2 | background: url(img/bars.gif) no-repeat 0 0; 3 | width: 70px; 4 | height: 14px; 5 | margin-left: 15px; 6 | -webkit-transition: all 0.2s linear; 7 | -moz-transition: all 0.2s linear; 8 | -o-transition: all 0.2s linear; 9 | transition: all 0.2s linear; 10 | } 11 | .np10{background-position: 0 -14px;} 12 | .np20{background-position: 0 -21px;} 13 | .np30{background-position: 0 -28px;} 14 | .np40{background-position: 0 -35px;} 15 | .np50{background-position: 0 -42px;} 16 | .np60{background-position: 0 -49px;} 17 | .np70{background-position: 0 -56px;} 18 | .np80{background-position: 0 -63px;} 19 | .np90{background-position: 0 -70px;} 20 | .np100{background-position: 0 -70px;} -------------------------------------------------------------------------------- /app/assets/stylesheets/application.css: -------------------------------------------------------------------------------- 1 | /* 2 | *= require locastyle_head 3 | * 4 | VENDOR 5 | *= require bootstrap/css/bootstrap 6 | 7 | *= require base 8 | *= require fonts 9 | *= require shortcutbox 10 | *= require colors/colors 11 | *= require buttons 12 | *= require icons 13 | *= require grid 14 | *= require footer 15 | *= require header 16 | *= require toolbar 17 | *= require sidebar 18 | *= require tables 19 | *= require functionalclasses 20 | *= require ie 21 | *= require pathway 22 | *= require modal 23 | *= require tabs 24 | *= require deprecated 25 | *= require collapse 26 | *= require mobile 27 | 28 | *= require select2 29 | *= require forms 30 | *= require passwordStrength 31 | *= require print 32 | 33 | */ 34 | -------------------------------------------------------------------------------- /app/views/manual/tabs.html: -------------------------------------------------------------------------------- 1 |
Tabs
2 | <%= content_for_clippy do %> 3 | 8 | 9 |
10 |
14 | <% end %>
15 |
16 | Conteúdo Tab 1
11 | Conteúdo Tab 2
12 | Conteúdo Tab 3
13 |
17 |
20 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 | #
3 | # If you find yourself ignoring temporary files generated by your text editor
4 | # or operating system, you probably want to add a global ignore instead:
5 | # git config --global core.excludesfile ~/.gitignore_global
6 |
7 | # Ignore bundler config
8 | /.bundle
9 |
10 | # Ignore the default SQLite database.
11 | /db/*.sqlite3
12 |
13 | # Ignore all logfiles and tempfiles.
14 | /log/*.log
15 |
16 | /tmp
17 | db/*.sqlite3
18 | log/*.log
19 | tmp/
20 | .sass-cache/
21 | .DS_Store
22 | .rvmrc
23 | config/unicorn.rb
24 | *.swp
25 |
26 | # Ignore assets and deploy related files.
27 | /public/assets/*.*
28 | /public/assets/manual/**
29 | /public/assets/bootstrap/**
30 | /public/deploy/**
31 |
--------------------------------------------------------------------------------
/app/views/manual/paths.html:
--------------------------------------------------------------------------------
1 | Padrão de código do Bootstrap.
18 | <%= clippy(yield(:code)) %> 19 |Passo a Passo
2 |Para telas que tem um processo, um passo a passo a seguir.
3 |4 | <%= content_for_clippy do %> 5 |
6 |
14 | <% end %>
15 |
16 | -
7 |
- 1 Passo 1 Informações 8 |
- 2 Passo 2 Aparência 9 |
- 3 Passo 3 Conteúdo 10 |
- 4 Passo 4 Destinatários 11 |
- 5 Passo 5 Envio 12 |
17 | <%= clippy(yield(:code)) %>
18 |
19 |
--------------------------------------------------------------------------------
/god/web.god:
--------------------------------------------------------------------------------
1 | # load in all god configs
2 |
3 | @rails_env = ENV['RAILS_ENV'] || "production"
4 | @rails_root = ENV['RAILS_ROOT'] || "/var/www/locastyle"
5 | @conf_dir = File.dirname(__FILE__)
6 | @server_deployment = ENV['LOCAL_DEPLOYMENT'] ? false : (%w(devintegration systemintegration production).member?(@rails_env))
7 | @pids_root = "#{@rails_root}/tmp/pids"
8 | @log_root = @server_deployment ? "/var/log/locastyle" : "#{@rails_root}/log"
9 |
10 | require "god"
11 | God.terminate_timeout = 60
12 | God.pid_file_directory = @pids_root
13 | God.log_file = "#{@log_root}/god.log"
14 |
15 | puts <<-GOD
16 |
17 | god configuration:
18 | RAILS_ENV : #{@rails_env}
19 | RAILS_ROOT : #{@rails_root}
20 | conf_dir : #{@conf_dir}
21 | log_root : #{@log_root}
22 | pids_root : #{@pids_root}
23 | server_mode: #{@server_deployment.inspect}
24 |
25 | GOD
26 |
27 | %w(unicorn).each {|g| God.load File.join(@conf_dir, "#{g}.god")}
28 |
--------------------------------------------------------------------------------
/app/views/manual/validacoes.html:
--------------------------------------------------------------------------------
1 | Estados de validações
2 |Tipos de validações. Normalmente usamos apenas a validação de error. Mas existem outras possibilidades.
3 | <%= content_for_clippy do %> 4 | 5 |
6 |
7 |
8 | Something may have gone wrong
9 |
10 |
11 |
12 |
13 | Please correct the error
14 |
15 |
16 |
17 |
18 | Woohoo!
19 |
20 | <% end %>
21 |
22 |
23 | <%= clippy(yield(:code)) %>
24 |
25 |
--------------------------------------------------------------------------------
/debian/init:
--------------------------------------------------------------------------------
1 | #! /bin/sh
2 | ### BEGIN INIT INFO
3 | # Provides: locastyle
4 | # Default-Start: 2 3 4 5
5 | # Default-Stop: 0 1 6
6 | # Short-Description: Locastyle - Default Interface to Locaweb
7 | ### END INIT INFO
8 |
9 | APP_PATH=/var/www/locastyle
10 |
11 | NAME=locastyle-monitor
12 | DESC=locastyle-monitor
13 | GOD="bundle exec god"
14 |
15 | set -e
16 |
17 | case "$1" in
18 | start)
19 | echo -n "Starting $DESC:"
20 | if (cd $APP_PATH && $GOD -c $APP_PATH/god/web.god && $GOD start appserver)
21 | then
22 | echo "$NAME started"
23 | else
24 | echo "failed"
25 | fi
26 | ;;
27 |
28 | stop)
29 | echo -n "Stopping $DESC: "
30 | if (cd $APP_PATH && $GOD stop appserver && $GOD terminate)
31 | then
32 | echo "$NAME stopped."
33 | else
34 | echo "failed!"
35 | fi
36 | ;;
37 |
38 | restart)
39 | ${0} stop
40 | ${0} start
41 | ;;
42 |
43 | *)
44 | echo "Usage: /etc/init.d/$NAME {start|stop|restart}" >&2
45 | exit 1
46 | ;;
47 | esac
48 |
49 | exit 0
50 |
--------------------------------------------------------------------------------
/app/views/manual/instalacao.html:
--------------------------------------------------------------------------------
1 | Instruções de instalação
2 |Primeiro passo: Adicione as tags abaixo para adicionar o pacote de CSS e Javascript.
3 |
4 | <link rel="stylesheet" type="text/css" href="<%= File.join(root_url.gsub(/https?:(.*)/, '\1'), path_to_asset('application.css')) %>">
5 | <script type="text/javascript" src="<%= File.join(root_url.gsub(/https?:(.*)/, '\1'), path_to_asset('application.js')) %>"></script>
6 |
8 | Segundo passo: Não tem segundo passo. ;-) 9 |
10 | 11 | <% content_for_clippy do %> 12 | 13 | 14 | <% end %> 15 | 16 |
17 | <%= clippy(yield(:code)) %>
18 |
--------------------------------------------------------------------------------
/config/environments/development.rb:
--------------------------------------------------------------------------------
1 | Boostrap::Application.configure do
2 | # Settings specified here will take precedence over those in config/application.rb
3 |
4 | # In the development environment your application's code is reloaded on
5 | # every request. This slows down response time but is perfect for development
6 | # since you don't have to restart the web server when you make code changes.
7 | config.cache_classes = false
8 |
9 | # Log error messages when you accidentally call methods on nil.
10 | config.whiny_nils = true
11 |
12 | # Show full error reports and disable caching
13 | config.consider_all_requests_local = true
14 | config.action_controller.perform_caching = false
15 |
16 | # Don't care if the mailer can't send
17 | config.action_mailer.raise_delivery_errors = false
18 |
19 | # Print deprecation notices to the Rails logger
20 | config.active_support.deprecation = :log
21 |
22 | # Only use best-standards-support built into browsers
23 | config.action_dispatch.best_standards_support = :builtin
24 |
25 |
26 | # Do not compress assets
27 | config.assets.compress = false
28 |
29 | # Expands the lines which load the assets
30 | config.assets.debug = true
31 | end
32 |
--------------------------------------------------------------------------------
/debian/rules:
--------------------------------------------------------------------------------
1 | #!/usr/bin/make -f
2 | # -*- makefile -*-
3 | # Sample debian/rules that uses debhelper.
4 | # This file was originally written by Joey Hess and Craig Small.
5 | # As a special exception, when this file is copied by dh-make into a
6 | # dh-make output file, you may use that output file without restriction.
7 | # This special exception was added by Craig Small in version 0.37 of dh-make.
8 |
9 | # Uncomment this to turn on verbose mode.
10 | #export DH_VERBOSE=1
11 |
12 | clean:
13 | dh_clean
14 | rm -rf $(DESTDIR)
15 |
16 | build:
17 | dh_testdir
18 | dh_testroot
19 | dh_prep
20 | dh_installdirs
21 |
22 | install:
23 |
24 | binary-indep: build install
25 | dh_testdir
26 | dh_testroot
27 | # Add here commands to install the package into debian/
7 |
20 | EOS
21 | content += CodeRay.scan(text, format).div(css: :class)
22 | content.html_safe
23 | end
24 |
25 | def content_for_clippy(&block)
26 | content_for :code, &block
27 | content_tag :div, &block
28 | end
29 |
30 | def theme_options
31 | LOCASTYLE_THEMES["locastyle"]["themes"]
32 | end
33 | end
34 |
--------------------------------------------------------------------------------
/app/assets/stylesheets/print.css:
--------------------------------------------------------------------------------
1 | @media print {
2 |
3 | body {
4 | font:100% verdana, arial, tahoma, sans-serif;
5 | }
6 |
7 | a {color:#000; text-decoration: none}
8 | h1.serviceName a {color:#666 !important;}
9 |
10 | .modal,
11 | #rodape,
12 | .actionsTable,
13 | .boxActions,
14 | #menuPrincipal,
15 | #toolbar,
16 | .lnkSugestoes,
17 | .statusGraphic,
18 | .chart,
19 | .filterCount,
20 | #menuPrincipal {
21 | display:none;
22 | }
23 |
24 | .breadcrumb {margin:0 0 20px; padding:20px 0; border:non;}
25 | .breadcrumb li {
26 | display:inline;
27 | list-style: none;
28 | }
29 |
30 | .breadcrumb li:after {content: " > ";}
31 | .breadcrumb li:last-child:after {display:none;}
32 |
33 | textarea {
34 | width:100%;
35 | min-height:200px;
36 | }
37 |
38 | th, td,
39 | .tableList tbody .motivoDefault td {color:#000;}
40 |
41 | p {
42 | color:#000;
43 | font-size:0.8em;
44 | margin-bottom:10px;
45 | }
46 |
47 | .boxCollapse {
48 | border-bottom:1px solid #CCC;
49 | padding:10px 0 20px;
50 | }
51 |
52 | /** TABLE **/
53 | th {
54 | padding:10px;
55 | text-align:left;
56 | }
57 |
58 | td {
59 | font-size:0.8em;
60 | padding:10px;
61 | }
62 |
63 | .tableList tbody td a {color:#666;}
64 |
65 |
66 | }
--------------------------------------------------------------------------------
/app/assets/javascripts/manual/theme_selector.js:
--------------------------------------------------------------------------------
1 | window.themeSelector = window.themeSelector || {};
2 |
3 | window.themeSelector = {
4 | init: function () {
5 | themeSelector.loadTheme();
6 | themeSelector.themeChangeBind();
7 | },
8 |
9 | loadTheme: function (selected_by_user) {
10 | var theme = themeSelector.setTheme(selected_by_user)
11 | regexp = new RegExp("color[A-Z][^ ]*");
12 | oldThemeClass = $("html").attr("class").match(regexp);
13 | if (oldThemeClass) {
14 | $("html").removeClass(oldThemeClass[0]);
15 | }
16 | $("html").addClass(theme);
17 | $("#theme_selector").val(theme);
18 | },
19 |
20 | setTheme: function (selected_by_user) {
21 | var theme;
22 | if (selected_by_user) {
23 | theme = selected_by_user;
24 | themeSelector.cookieManager.createCookie("_locastyle_sample_theme", selected_by_user, 1);
25 | } else {
26 | theme = themeSelector.cookieManager.checkCookie();
27 | }
28 | return theme;
29 | },
30 |
31 | themeChangeBind: function () {
32 | $("#theme_selector").on("change", function () {
33 | themeSelector.loadTheme($(this).val());
34 | });
35 | }
36 | }
37 |
38 | $(document).ready(function () {
39 | themeSelector.init();
40 | });
41 |
--------------------------------------------------------------------------------
/app/views/manual/slider.html:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 |
18 |
19 | Slider
2 |Slider simples.
3 |4 | <%= content_for_clippy do %> 5 |
6 |
<% end %>
39 |
40 |
7 |
36 | ‹
37 | ›
38 |
8 | 
9 |
14 |
9 |
10 |
13 | Primeiro Slide
11 |@lastshiro
12 |
15 | 
16 |
21 |
16 |
17 |
20 | Segundo Slide
18 |@xandolino
19 |
22 | 
23 |
28 |
23 |
24 |
27 | Terceiro Slide
25 |@lastshiro
26 |
29 | 
30 |
35 |
30 |
31 |
34 | Quarto Slide
32 |@xandolino
33 |
41 | <%= clippy(yield(:code)) %>
42 |
43 |
--------------------------------------------------------------------------------
/app/views/manual/footer-principal.html:
--------------------------------------------------------------------------------
1 | Footer de exemplo
2 |O Footer precisa ser colocado no final do div #main.
3 | 4 | <%= content_for_clippy do %> 5 | 27 | <% end %> 28 | 29 |
30 | <%= clippy(yield(:code)) %>
31 |
32 |
--------------------------------------------------------------------------------
/app/assets/javascripts/manual/cookie_manager.js:
--------------------------------------------------------------------------------
1 | window.themeSelector = window.themeSelector || {};
2 |
3 | window.themeSelector.cookieManager = {
4 | init: function () {
5 | themeSelector.cookieManager.checkCookie();
6 | },
7 |
8 | checkCookie: function () {
9 | var cookie = themeSelector.cookieManager.readCookie();
10 | if (cookie && cookie !== -1) {
11 | var value = cookie.split("=")[1]
12 | return value;
13 | }
14 | },
15 |
16 | createCookie: function (name, value, days) {
17 | if (days) {
18 | var today = new Date();
19 | var date = new Date(today.getTime() + (days * 24 * 60 * 60 * 1000));
20 | var expires = "; expires=" + date.toGMTString();
21 | } else {
22 | var expires = "";
23 | }
24 | document.cookie = name + "=" + value + expires + "; path=/";
25 | },
26 |
27 | readCookie: function () {
28 | var desiredCookieRegExp = new RegExp("_locastyle_sample_theme=[^ ]*");
29 | var cookies = document.cookie.split(';');
30 | for (var i=0; i4 | São mensagens para mostrar uma mensagem de retorno, alertas, erros ou informações. 5 |
6 |7 |
Uma mensagem com observação
8 | <%= content_for_clippy do %> 9 |
10 |
13 |
14 | Campus Online Criado em 20/04/2012 Editar
11 |Uma pequena lista de emails do Campus Online. Criado em 20/04/2012
12 |
15 | ×
16 | Warning! Uma mensagem de aviso.
17 |
18 |
19 | ×
20 | Erro! Um erro aconteceu.
21 |
22 |
23 | ×
24 | Sucesso! Tudo aconteceu como nos conformes.
25 |
26 |
27 | ×
28 | Informação! Uma informação qualquer do seu sistema.
29 |
30 | <% end %>
31 |
32 |
33 | <%= clippy(yield(:code)) %>
34 |
35 |
--------------------------------------------------------------------------------
/god/unicorn.god:
--------------------------------------------------------------------------------
1 | God.watch do |w|
2 | w.name = "unicorn"
3 | w.group = "appserver"
4 | w.interval = 30.seconds
5 | w.dir = @rails_root
6 | w.start = "bundle exec unicorn_rails -c #{@rails_root}/config/unicorn/#{@rails_env}.rb -E #{@rails_env} -D"
7 | w.stop = "/bin/kill -QUIT `/bin/cat #{@pids_root}/unicorn.pid`"
8 | w.restart = "/bin/kill -USR2 `/bin/cat #{@pids_root}/unicorn.pid`"
9 | w.start_grace = 10.seconds
10 | w.restart_grace = 10.seconds
11 | w.pid_file = "#{@pids_root}/unicorn.pid"
12 |
13 | w.uid = w.gid = "locastyle" if @server_deployment
14 | w.log = "#{@log_root}/god-unicorn.log"
15 |
16 | w.behavior(:clean_pid_file)
17 |
18 | w.start_if do |start|
19 | start.condition :process_running do |c|
20 | c.interval = 5.seconds
21 | c.running = false
22 | end
23 | end
24 |
25 | w.restart_if do |restart|
26 | restart.condition :memory_usage do |c|
27 | c.above = 300.megabytes
28 | c.times = [3, 5] # 3 out of 5 intervals
29 | end
30 |
31 | restart.condition :cpu_usage do |c|
32 | c.above = 50.percent
33 | c.times = 5
34 | end
35 | end
36 |
37 | w.lifecycle do |on|
38 | on.condition :flapping do |c|
39 | c.to_state = [:start, :restart]
40 | c.times = 5
41 | c.within = 5.minute
42 | c.transition = :unmonitored
43 | c.retry_in = 10.minutes
44 | c.retry_times = 5
45 | c.retry_within = 2.hours
46 | end
47 | end
48 | end
49 |
--------------------------------------------------------------------------------
/config/environments/test.rb:
--------------------------------------------------------------------------------
1 | Boostrap::Application.configure do
2 | # Settings specified here will take precedence over those in config/application.rb
3 |
4 | # The test environment is used exclusively to run your application's
5 | # test suite. You never need to work with it otherwise. Remember that
6 | # your test database is "scratch space" for the test suite and is wiped
7 | # and recreated between test runs. Don't rely on the data there!
8 | config.cache_classes = true
9 |
10 | # Configure static asset server for tests with Cache-Control for performance
11 | config.serve_static_assets = true
12 | config.static_cache_control = "public, max-age=3600"
13 |
14 | # Log error messages when you accidentally call methods on nil
15 | config.whiny_nils = true
16 |
17 | # Show full error reports and disable caching
18 | config.consider_all_requests_local = true
19 | config.action_controller.perform_caching = false
20 |
21 | # Raise exceptions instead of rendering exception templates
22 | config.action_dispatch.show_exceptions = false
23 |
24 | # Disable request forgery protection in test environment
25 | config.action_controller.allow_forgery_protection = false
26 |
27 | # Tell Action Mailer not to deliver emails to the real world.
28 | # The :test delivery method accumulates sent emails in the
29 | # ActionMailer::Base.deliveries array.
30 | config.action_mailer.delivery_method = :test
31 |
32 |
33 | # Print deprecation notices to the stderr
34 | config.active_support.deprecation = :stderr
35 | end
36 |
--------------------------------------------------------------------------------
/app/views/manual/chamadas.html:
--------------------------------------------------------------------------------
1 | Formulários
2 | <%= content_for_clippy do %> 3 | 17 | 18 |
19 |
37 | <% end %>
38 |
39 | Primeiros passos
20 |Comece aqui suas ações para as configurações do seu site.
21 | 35 | Minimizar Atalhos 36 |
40 | <%= clippy(yield(:code)) %>
41 |
42 |
--------------------------------------------------------------------------------
/app/views/manual/termo-uso.html:
--------------------------------------------------------------------------------
1 | TERMO DE ADESÃO
2 |CONSIDERANDO QUE:
3 | 4 |1. A LOCAWEB mantém o “site” style.locaweb.com.br na internet,
5 | 6 |2. Por meio do referido “site”, a LOCAWEB oferece uma biblioteca das linguagens de programação web CSS e Javascript, linguagens estas que agrupam funções e códigos, permitindo que o desenvolvedor produza páginas na internet de maneira mais consistente e rápida,
7 | 8 |3. Esta biblioteca é de uso gratuito e pode ser utilizada por qualquer desenvolvedor que desejar, sendo, no entanto, EXPRESSAMENTE VEDADA a alteração dos códigos disponíveis,
9 | 10 |4. O ANUENTE tem interesse em se utilizar desta página e conhecimentos técnicos para esta finalidade,
11 | 12 |DECLARA ELE, expressamente, que CONCORDA com o fato de que a utilização da página e da biblioteca nela disponível corre por sua conta única e exclusiva, isentando a Locaweb de qualquer responsabilidade:
13 | 14 |-
15 |
- a) seja por problemas nos códigos, e/ou, 16 |
- b) por possíveis quebras nos sistemas dos desenvolvedores que utilizarem tais códigos, em razão de: 17 |
- - invasões por terceiros, ou 18 |
- - de quaisquer outros fatos alheios à vontade da LOCAWEB, ou 19 |
- - em razão de atualizações levadas a efeito pela própria LOCAWEB, ou, 20 |
- - em decorrência de quaisquer outros atos ou fatos não previstos expressamente neste termo, ou, 21 |
- - por qualquer outro problema que possa decorrer dessa utilização. 22 |
O presente termo será registrado em Cartório de Títulos e Documentos.
25 | 26 |São Paulo, 13 de agosto de 2012
27 | 28 |LOCAWEB SERVIÇOS DE INTERNET S/A
29 | -------------------------------------------------------------------------------- /spec/javascripts/support/jasmine.yml: -------------------------------------------------------------------------------- 1 | # src_files 2 | # 3 | # Return an array of filepaths relative to src_dir to include before jasmine specs. 4 | # Default: [] 5 | # 6 | # EXAMPLE: 7 | # 8 | # src_files: 9 | # - lib/source1.js 10 | # - lib/source2.js 11 | # - dist/**/*.js 12 | # 13 | src_files: 14 | - assets/jquery.js 15 | - assets/cookie.js 16 | - assets/jquery-ui.min.js 17 | - assets/select2.min.js 18 | - assets/bootstrap/js/bootstrap.js 19 | # DEPENDENCIES 20 | - assets/locastyle.js 21 | 22 | # stylesheets 23 | # 24 | # Return an array of stylesheet filepaths relative to src_dir to include before jasmine specs. 25 | # Default: [] 26 | # 27 | # EXAMPLE: 28 | # 29 | # stylesheets: 30 | # - css/style.css 31 | # - stylesheets/*.css 32 | # 33 | stylesheets: 34 | - stylesheets/**/*.css 35 | 36 | # helpers 37 | # 38 | # Return an array of filepaths relative to spec_dir to include before jasmine specs. 39 | # Default: ["helpers/**/*.js"] 40 | # 41 | # EXAMPLE: 42 | # 43 | # helpers: 44 | # - helpers/**/*.js 45 | # 46 | helpers: 47 | - helpers/**/*.js 48 | 49 | # spec_files 50 | # 51 | # Return an array of filepaths relative to spec_dir to include. 52 | # Default: ["**/*[sS]pec.js"] 53 | # 54 | # EXAMPLE: 55 | # 56 | # spec_files: 57 | # - **/*[sS]pec.js 58 | # 59 | spec_files: 60 | - '**/*[sS]pec.js' 61 | 62 | # src_dir 63 | # 64 | # Source directory path. Your src_files must be returned relative to this path. Will use root if left blank. 65 | # Default: project root 66 | # 67 | # EXAMPLE: 68 | # 69 | # src_dir: public 70 | # 71 | src_dir: 72 | 73 | # spec_dir 74 | # 75 | # Spec directory path. Your spec_files must be returned relative to this path. 76 | # Default: spec/javascripts 77 | # 78 | # EXAMPLE: 79 | # 80 | # spec_dir: spec/javascripts 81 | # 82 | spec_dir: spec/javascripts 83 | -------------------------------------------------------------------------------- /app/assets/stylesheets/tabs.css: -------------------------------------------------------------------------------- 1 | /*** TABS ***/ 2 | .tabs { 3 | background: #e5e5e5; 4 | height: 32px; 5 | padding: 0 10px 1px; 6 | margin: 10px 0 0; 7 | border-top-left-radius: 3px; 8 | border-top-right-radius: 3px; 9 | } 10 | .tabs li {display: inline;} 11 | .tabs li a { 12 | display: inline-block; 13 | font: 500 11px Ubuntu, helvetica, tahoma, verdana, arial, sans-serif; 14 | text-transform: uppercase; 15 | color: #545454; 16 | padding: 13px 10px 7px; 17 | height: 13px; 18 | position: relative; 19 | top: -3px; 20 | border-top: 2px solid transparent; 21 | position: relative; 22 | } 23 | .tabs li a:after, 24 | .tabs li.active a:after { 25 | content: " "; 26 | display: none; 27 | width: 11px; 28 | height: 6px; 29 | position: absolute; 30 | bottom: -6px; 31 | left: 50%; 32 | background: url(img/setaTab.png) no-repeat center center; 33 | margin-left: -5px; 34 | } 35 | 36 | .tabs li a:hover, 37 | .tabs li a:focus, 38 | .tabs li.active a { 39 | text-decoration: none; 40 | background:#FFF; 41 | outline: none; 42 | border-top: 2px solid #777; 43 | border-top-right-radius: 3px; 44 | border-top-left-radius: 3px; 45 | } 46 | .tabs li.active a{outline: none;} 47 | .tabs li a:hover .setaTab, 48 | .tabs li a:focus .setaTab, 49 | .tabs li.active a .setaTab, 50 | .tabs li a:hover:after, 51 | .tabs li a:focus:after, 52 | .tabs li.active a:after { 53 | display: block; 54 | } 55 | 56 | .tab-content { 57 | border: 1px solid #e5e5e5; 58 | margin-bottom: 20px; 59 | min-width: 734px; 60 | width: auto; 61 | background: white; 62 | } 63 | .tabs + .tab-content {border-top: none;} 64 | 65 | .tab-content .tab-pane {padding: 20px 10px 10px;} 66 | 67 | .tab-content.noborder {border: none;} 68 | .tabs .searchInput { 69 | height: 17px; 70 | margin: 2px 0 0; 71 | } 72 | .tabs .btn-small{padding: 5px 12px;} 73 | -------------------------------------------------------------------------------- /app/views/layouts/example.html.erb: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
18 |
26 |
27 |
28 |
29 |
30 |
31 |
39 |
40 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/app/assets/javascripts/manual/functions.js:
--------------------------------------------------------------------------------
1 | $(document).ready(function() {
2 |
3 | // Amostra do Masked Input em funcionamento
4 | $("#data").mask("99/99/9999");
5 | $("#data2").mask("99/99/9999",{completed:function(){alert("Você digitou a data: "+this.val());}});
6 |
7 | // Input de Telefone com 8 ou 9 digitos
8 | $('#telefone').mask("(99) 9999-9999?9").ready(function(event) {
9 | var target, phone, element;
10 | target = (event.currentTarget) ? event.currentTarget : event.srcElement;
11 | if (target) {
12 | phone = target.value.replace(/\D/g, '');
13 | }
14 | element = $(target);
15 | element.unmask();
16 | if(phone && phone.length > 10) {
17 | element.mask("(99) 99999-999?9");
18 | } else {
19 | element.mask("(99) 9999-9999?9");
20 | }
21 | });
22 |
23 | $("#cpf").mask("999.999.999-99");
24 | $("#cpf2").mask("999.999.999-99",{placeholder:" "});
25 | });
26 |
27 | var resizeBoxes = function(){
28 | var contentHeight = $('.main').outerHeight();
29 | var sidebarHeight = $('aside.boxes').height();
30 |
31 | if (contentHeight > sidebarHeight) {
32 | $('aside.boxes').css("min-height", contentHeight);
33 | } else {
34 | $('aside.boxes').css("height", "auto");
35 | }
36 |
37 | if (sidebarHeight > contentHeight) {
38 | $('.main').css("min-height", sidebarHeight - 20);
39 | } else {
40 | $('.main').css("height", "auto");
41 | }
42 | };
43 |
44 | $('.main').on('shown', function(){resizeBoxes()});
45 |
46 | $(".clippy").live({
47 | clippycopy: function(e, data) {
48 | data.text = $(this).children(".clippy_code").text();
49 | },
50 | clippyover: function() {
51 | $(this).children(".clippy_label").text("copiar");
52 | },
53 | clippyout: function() {
54 | $(this).children(".clippy_label").text("");
55 | },
56 | clippycopied: function() {
57 | $(this).children(".clippy_label").text("texto copiado");
58 | }
59 |
60 |
61 |
62 | });
63 |
64 |
--------------------------------------------------------------------------------
/app/assets/stylesheets/buttons.css:
--------------------------------------------------------------------------------
1 | /** Resolve bug quando era colocado icon no botões de dropdown **/
2 | .btn-group > .btn + .dropdown-toggle {vertical-align: bottom;}
3 |
4 | [class*="btn"] {
5 | line-height: normal;
6 | font-family: Ubuntu, verdana, arial, helvetica, tahoma, sans-serif;
7 | }
8 |
9 | .btn {border-radius: 3px; padding: 6px 12px;}
10 | .tab .btn-small{padding: 3px 12px;}
11 |
12 | /** arruma cor padrao de btns com icones **/
13 | table tr td a.btn,
14 | p a.btn,
15 | a[class*="btn"],
16 | a[class*="btn"]:hover,
17 | .btn[class^="ico-"],
18 | .btn[class*=" ico-"],
19 | .btn[class*=" ico-"]:hover,
20 | .btn[class^="ico-"]:hover {color: inherit;}
21 |
22 | p a.btn {color: #333;}
23 |
24 | /**
25 | *** Fixing: A linha 6042 do Bootstrap caga a cor desses botoes. Quando eles estão com ícones.
26 | **/
27 | .btn.btn-info,
28 | .btn.btn-info:hover,
29 | .btn.btn-warning,
30 | .btn.btn-warning:hover,
31 | .btn.btn-success,
32 | .btn.btn-success:hover,
33 | .btn.btn-danger,
34 | .btn.btn-danger:hover,
35 | .btn.btn-inverse,
36 | .btn.btn-inverse:hover,
37 | .forceClass .btn.btn-primary,
38 | .forceClass .btn.btn-primary:hover,
39 | .forceClass .btn-primary[class^="ico-"],
40 | .forceClass .btn-primary[class*=" ico-"] {color: #FFF;}
41 |
42 | .btn.btn-large {
43 | font-size: 14px;
44 | padding: 10px 19px 10px 14px;
45 | }
46 |
47 | .btn.btn-long {
48 | padding: 6px 32px;
49 | }
50 |
51 | .btn-choice {
52 | width: 100px;
53 | margin-bottom: 10px;
54 | }
55 |
56 | .btn-shadow {
57 | position: relative;
58 | background: #bfbfbf !important;
59 | border-bottom: 1px solid #adadad !important;
60 | }
61 |
62 | .btn-shadow:after,
63 | .btn-shadow:before {
64 | content: "";
65 | position: absolute;
66 | border: 9px;
67 | border-style: solid;
68 | top: 28px;
69 | }
70 |
71 | .btn-shadow:after{
72 | border-color: #bfbfbf transparent transparent transparent;
73 | left: 42%
74 | }
75 | .btn-shadow:before{
76 | border-color: #adadad transparent transparent transparent;
77 | left: 42%;
78 | }
79 |
--------------------------------------------------------------------------------
/app/assets/stylesheets/footer.css:
--------------------------------------------------------------------------------
1 | /* FOOTER */
2 | footer#footer {
3 | clear: both;
4 | position: absolute;
5 | bottom: 0;
6 | width: 100%;
7 | }
8 | #footer .footerTop {
9 | padding: 15px 0 0;
10 | background: url(img/bgfooter.png);
11 | }
12 | #footer nav {height: 50px;}
13 |
14 | #footer nav h6 {
15 | font: 300 17px Ubuntu, verdana, tahoma, arial, helvetica, sans-serif;
16 | color: #FFF;
17 | text-transform: uppercase;
18 | background: #000;
19 | padding: 15px;
20 | margin: 0;
21 | float: left;
22 | }
23 |
24 | #footer nav {
25 | background: #141414;
26 | border: 1px solid #383838;
27 | border-bottom: 0;
28 | border-radius: 3px;
29 | }
30 |
31 | #footer ul{float: left; padding: 15px; margin: 0;}
32 | #footer ul li {display: inline;}
33 |
34 | #footer nav ul li {
35 | display: inline-block;
36 | color: #FFF;
37 | padding: 5px 35px;
38 | background-position: left center;
39 | background-repeat: no-repeat;
40 | border-right: 1px solid #434343;
41 | margin-right: 25px;
42 | }
43 | #footer nav ul li a {color: #fff;}
44 | #footer nav ul li:last-child {border-right: none;}
45 |
46 | #footer ul li.ico-helpDesk {background-image: url(img/icoHelpDesk.png);}
47 | #footer ul li.ico-chat {background-image: url(img/icoChat.png);}
48 | #footer ul li.ico-phone {background-image: url(img/icoTelefone.png);}
49 |
50 | .subfooter {
51 | padding: 10px 0;
52 | color: #545454;
53 | font-size: 11px;
54 | background: #FFF;
55 | clear:both;
56 | overflow: hidden;
57 | }
58 |
59 | .subfooter strong {color: #2a2a2a;}
60 | .subfooter .lastAccess {
61 | padding: 0 0 0 20px;
62 | background: url(img/ico-ultimoAcesso.png) no-repeat left center;
63 | }
64 | .copyRight {margin: 0;}
65 |
66 | .icoInterroga {
67 | display: inline-block;
68 | text-indent: -9999px;
69 | background: url(img/icoInterroga.png) no-repeat center;
70 | width: 12px;
71 | height: 12px;
72 | vertical-align: middle;
73 | }
74 |
75 | #footer [class^="ico"]:before,
76 | #footer [class*=" ico"]:before {display: none;}
77 | #footer .lnkArrowWhite{margin: 20px 10px 0 0; color: #fff;}
78 |
--------------------------------------------------------------------------------
/app/assets/javascripts/passwordStrength.js:
--------------------------------------------------------------------------------
1 | $(function(){
2 | $.fn.passwordStrength = function(options) {
3 | var getPasswordStrength;
4 | getPasswordStrength = function(pass) {
5 | var easy, medium, medium_easy, passReturnStrength, strong, strong_easy;
6 | easy = pass.length;
7 | if (easy > 3) {
8 | easy = 3;
9 | }
10 | medium_easy = pass.replace(/[0-9]/g, "");
11 | medium = pass.length - medium_easy.length;
12 | if (medium > 4) {
13 | medium = 4;
14 | }
15 | strong_easy = pass.replace(/\W/g, "");
16 | strong = pass.length - strong_easy.length;
17 | if (strong > 5) {
18 | strong = 5;
19 | }
20 | passReturnStrength = ((easy * 10) - 30) + (medium * 10) + (strong * 10);
21 | if (passReturnStrength < 0) {
22 | passReturnStrength = 0;
23 | }
24 | if (passReturnStrength > 100) {
25 | passReturnStrength = 100;
26 | }
27 | return passReturnStrength;
28 | };
29 | return this.each(function() {
30 | var _this;
31 | _this = this;
32 | _this.opts = {};
33 | _this.opts = $.extend({}, $.fn.passwordStrength.defaults, options);
34 | _this.div = $(_this.opts.targetDiv);
35 | _this.defaultClass = _this.div.attr("class");
36 | _this.percents = (_this.opts.classes.length ? 100 / _this.opts.classes.length : 100);
37 | return $(this).keyup(function() {
38 | var largeNumber;
39 | if (typeof el === "undefined") {
40 | this.el = $(this);
41 | }
42 | largeNumber = Math.floor(getPasswordStrength(this.value) / this.percents);
43 | if (100 <= getPasswordStrength(this.value)) {
44 | largeNumber = this.opts.classes.length - 1;
45 | }
46 | return this.div.removeAttr("class").addClass(this.defaultClass).addClass(this.opts.classes[largeNumber]);
47 | }).next();
48 | });
49 | };
50 |
51 | $.fn.passwordStrength.defaults = {
52 | classes: Array("np10", "np20", "np30", "np40", "np50", "np60", "np70", "np80", "np90", "np100"),
53 | targetDiv: "#passwordStrength",
54 | cache: {}
55 | };
56 |
57 | $(document).ready(function() {
58 | return $("#user_password, #account_password").passwordStrength();
59 | });
60 | })
--------------------------------------------------------------------------------
/app/assets/stylesheets/ie.css:
--------------------------------------------------------------------------------
1 | .ie8 a:hover {text-decoration: none;}
2 | .ie8 .messageInfo .countViews:after{right: 0!important;}
3 | .ie8 .in.collapse {height:auto !important;}
4 | .ie8 .chooseBox a.lnkChoose,
5 | .ie9 .chooseBox a.lnkChoose,
6 | .ie7 .chooseBox a.lnkChoose {background:#FFF; filter: alpha(opacity = 0);}
7 | .ie8 .shortcutBox > div {width:29.6%;}
8 | .ie8 .maxBox.shortcutBox div {width: inherit;}
9 | .ie8 .sideBox h3,
10 | .ie9 .sideBox h3{margin-bottom: 5px;}
11 | .ie8 .lnkArrow:before{font-size: 12px;}
12 | .ie8 .boxInfo header h3 small{margin-left: 35px;}
13 | .ie8 .ico-calendar-more,
14 | .ie8 .ico-calendar-check{width: 35px;}
15 |
16 | .ie8 .pathWay.steps6 li {width:16.382%;}
17 | .ie8 .pathWay.steps5 li {width:19.81%;}
18 | .ie8 .pathWay.steps4 li {width:24.816%;}
19 | .ie8 .pathWay.steps3 li {width:33.14%;}
20 | .ie8 .pathWay.steps2 li {width:49.816%;}
21 |
22 | .ie8 .chooseBox a.lnkChoose,
23 | .ie9 .chooseBox a.lnkChoose,
24 | .ie7 .chooseBox a.lnkChoose {background: #FFF; filter: alpha(opacity = 0);}
25 | .ie8 .shortcutBox h3:before {text-align: center;}
26 |
27 | /***
28 | **** IE8 Fix
29 | ***/
30 | .ie8 [class^="ico-"]:before,
31 | .ie8 [class*="ico-"]:before,
32 | .ie8 .lnkSeta:before,
33 | .ie8 .lnkArrow:before {
34 | text-decoration: none !important;
35 | }
36 | .ie8 .messageInfo .countViews:after {right: 0;}
37 |
38 | .ie8 .shortcutBox div {width: 29.6%;}
39 | .ie8 .shortcutBox .span3 {width: 22.1%;}
40 | .ie8 .maxBox.shortcutBox div {width: 100%;}
41 |
42 | .ie7 .messageInfo .countViews:after,
43 | .ie9 .messageInfo .countViews:after{margin-top: -10px; right: 0;}
44 |
45 | /***
46 | **** Fix do IE9 para Altura dos collapses em conjunto com actionsTable que aparecia e desaparecia
47 | ***/
48 | .ie9 .boxCollapse {overflow:hidden;}
49 | .ie9 .boxCollapse.active, .ie9 .boxCollapse.active .in {overflow:visible; height:auto !important;}
50 | .ie9 #menuPrincipal > ul > li > a {font-size:13px;}
51 |
52 |
53 | .ie8 .progress .bar,
54 | .ie9 .progress .bar{filter: none;}
55 | .ie9 #menuPrincipal > ul > li{height: 36px;}
56 | .ie9 #menuPrincipal > ul > li > a{padding-bottom: 11px;}
57 |
58 |
59 | .ie9 .boxCollapse.active,
60 | .ie9 .boxCollapse.active .in {
61 | overflow: visible;
62 | height: auto !important;
63 | }
--------------------------------------------------------------------------------
/app/assets/javascripts/analytics_trackevent.js:
--------------------------------------------------------------------------------
1 |
2 | //
3 | // TRACK EVENT ANALYTICS
4 | // $('.serviceName a').attr('onclick', "_gaq.push(['_trackEvent(category, action, opt_label, opt_value, opt_noninteraction)]);");
5 | $('.serviceName a').attr('onclick', "_gaq.push(['_trackEvent', 'Logo', 'Clique', 'Nome do Servico']);"); // Logo do produto
6 | $('.logOut').attr('onclick', "_gaq.push(['_trackEvent', 'BT_Sair', 'Clique', 'Sair do Servico']);"); // Botão sair
7 | $('.lnkSugestoes').attr('onclick', "_gaq.push(['_trackEvent', 'BT_Sugestoes', 'Clique', 'Sugestoes Feedbackr']);"); // Link de sugestões
8 | $('.infoLogin .btn-group').attr('onclick', "_gaq.push(['_trackEvent', 'Combo_Administrar', 'Clique', 'Troca de Ambiente']);"); // Combo de mudança de ambiente
9 |
10 | $('.minShortcuts.shortcutExpanded').attr('onclick', "_gaq.push(['_trackEvent', 'Atalhos', 'Clique', 'Minimizar']);"); // links minimizar atalhos
11 | $('.minShortcuts').attr('onclick', "_gaq.push(['_trackEvent', 'Atalhos', 'Clique', 'Expandir']);"); // links expandir atalhos
12 |
13 | $('.span12 .carousel-control.left').attr('onclick', "_gaq.push(['_trackEvent', 'Slider', 'Clique', 'Anterior']);"); // seta dica esquerda HOME
14 | $('.span12 .carousel-control.right').attr('onclick', "_gaq.push(['_trackEvent', 'Slider', 'Clique', 'Proximo']);"); // seta dica direita HOME
15 |
16 | $('.innerSideBox .carousel-control.left').attr('onclick', "_gaq.push(['_trackEvent', 'Slider', 'Clique', 'Anterior']);"); // seta dica esquerda
17 | $('.innerSideBox .carousel-control.right').attr('onclick', "_gaq.push(['_trackEvent', 'Slider', 'Clique', 'Proximo']);"); // seta dica direita
18 |
19 | $('.footerTop .ico-helpDesk').attr('onclick', "_gaq.push(['_trackEvent', 'Atendimento', 'Clique', 'Helpdesk']);"); // link Help Desk do Footer
20 | $('.footerTop .ico-Chat').attr('onclick', "_gaq.push(['_trackEvent', 'Atendimento', 'Clique', 'Chat']);"); // link Chat do Footer
21 | $('.footerTop .ico-Telefone').attr('onclick', "_gaq.push(['_trackEvent', 'Atendimento', 'Clique', 'Telefone']);"); // link Telefone do Footer
22 | $('.footerTop .lnkArrow.lnkArrowWhite').attr('onclick', "_gaq.push(['_trackEvent', 'Atendimento', 'Clique', 'VerFormasAtendimento']);"); // Link Ver Outras Formas
23 |
24 |
--------------------------------------------------------------------------------
/vendor/assets/javascripts/cookie.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * jQuery Cookie Plugin v1.3
3 | * https://github.com/carhartl/jquery-cookie
4 | *
5 | * Copyright 2011, Klaus Hartl
6 | * Dual licensed under the MIT or GPL Version 2 licenses.
7 | * http://www.opensource.org/licenses/mit-license.php
8 | * http://www.opensource.org/licenses/GPL-2.0
9 | */
10 | (function ($, document, undefined) {
11 |
12 | var pluses = /\+/g;
13 |
14 | function raw(s) {
15 | return s;
16 | }
17 |
18 | function decoded(s) {
19 | return decodeURIComponent(s.replace(pluses, ' '));
20 | }
21 |
22 | var config = $.cookie = function (key, value, options) {
23 |
24 | // write
25 | if (value !== undefined) {
26 | options = $.extend({}, config.defaults, options);
27 |
28 | if (value === null) {
29 | options.expires = -1;
30 | }
31 |
32 | if (typeof options.expires === 'number') {
33 | var days = options.expires, t = options.expires = new Date();
34 | t.setDate(t.getDate() + days);
35 | }
36 |
37 | value = config.json ? JSON.stringify(value) : String(value);
38 |
39 | return (document.cookie = [
40 | encodeURIComponent(key), '=', config.raw ? value : encodeURIComponent(value),
41 | options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
42 | options.path ? '; path=' + options.path : '',
43 | options.domain ? '; domain=' + options.domain : '',
44 | options.secure ? '; secure' : ''
45 | ].join(''));
46 | }
47 |
48 | // read
49 | var decode = config.raw ? raw : decoded;
50 | var cookies = document.cookie.split('; ');
51 | for (var i = 0, parts; (parts = cookies[i] && cookies[i].split('=')); i++) {
52 | if (decode(parts.shift()) === key) {
53 | var cookie = decode(parts.join('='));
54 | return config.json ? JSON.parse(cookie) : cookie;
55 | }
56 | }
57 |
58 | return null;
59 | };
60 |
61 | config.defaults = {};
62 |
63 | $.removeCookie = function (key, options) {
64 | if ($.cookie(key) !== null) {
65 | $.cookie(key, null, options);
66 | return true;
67 | }
68 | return false;
69 | };
70 |
71 | })(jQuery, document);
--------------------------------------------------------------------------------
/lib/tasks/deploy.rake:
--------------------------------------------------------------------------------
1 | # -*- coding: UTF-8 -*-
2 | namespace :deploy do
3 | @agent = "[Locastyle Robot] says:"
4 |
5 | task :setup, :version do |t, args|
6 | update_version(args[:version])
7 | precompile
8 | package(args[:version])
9 | git_commit_and_tag(args[:version])
10 | end
11 |
12 | def update_version(version)
13 | File.open(File.join(Rails.root, "app/assets/stylesheets/locastyle_head.css"), "w") do |f|
14 | f.puts "/*! Locastyle version: #{version}*/"
15 | end
16 |
17 | File.open(File.join(Rails.root, "app/assets/javascripts/locastyle_head.js"), "w") do |f|
18 | f.puts "/*! Locastyle version: #{version}*/"
19 | end
20 | end
21 |
22 | def package(version)
23 | puts "#{@agent} Cleaning assets and creating deploy directory..."
24 | sh %{cp -fr public/assets/ public/deploy/ &&
25 | cd public/deploy &&
26 | mv {application,locastyle}.css &&
27 | mv {application,locastyle}.css.gz &&
28 | mv {application,locastyle}.js &&
29 | mv {application,locastyle}.js.gz &&
30 | rm -f manifest.yml &&
31 | rm -f .DS_Store &&
32 | rm -rf manual/ &&
33 | rm bootstrap/customize-bootstrap.png &&
34 | zip -r #{version}.zip . &&
35 | cp #{version}.zip edge.zip }
36 | puts "#{@agent} Everything done, version #{version} of Locastyle is ready to upload."
37 | end
38 |
39 | def precompile
40 | puts "#{@agent} Compiling assets..."
41 | Rake::Task["assets:precompile"].invoke
42 | puts "#{@agent} Assets fully compiled!"
43 | end
44 |
45 | def git_commit_and_tag(version)
46 | puts "#{@agent} Let's commit it..."
47 | sh %{git add . &&
48 | git commit -m "bump de versão: #{version}" &&
49 | git tag -a "#{version}" -m "" }
50 | puts "#{@agent} Done, now to push the code is up to you."
51 | end
52 |
53 | task :clean do
54 | puts "#{@agent} Removing all compiled assets..."
55 | Rake::Task["assets:clean"].invoke
56 | puts "#{@agent} Put some Locastyle files back..."
57 | sh %{git checkout -f}
58 | puts "#{@agent} Cleaning deployment related files from repo..."
59 | sh %{rm -r public/deploy/}
60 | puts "#{@agent} Deployment related files cleaned, you are good to go!"
61 | end
62 | end
63 |
--------------------------------------------------------------------------------
/app/views/manual/tags-inline.html:
--------------------------------------------------------------------------------
1 |
2 | Tags de indicação
3 |4 | No Bootstrap eles chamam de LABELS. Mas para não confundirmos com LABELS de input, colocamos o nome de Tags. 5 |
6 | 7 | <%= content_for_clippy do %> 8 || Labels | 12 |Markup | 13 |
|---|---|
| 18 | Default 19 | | 20 |
21 | <span class="label">Default</span>
22 | |
23 |
| 26 | Success 27 | | 28 |
29 | <span class="label label-success">Success</span>
30 | |
31 |
| 34 | Warning 35 | | 36 |
37 | <span class="label label-warning">Warning</span>
38 | |
39 |
| 42 | Important 43 | | 44 |
45 | <span class="label label-important">Important</span>
46 | |
47 |
| 50 | Info 51 | | 52 |
53 | <span class="label label-info">Info</span>
54 | |
55 |
| 58 | Inverse 59 | | 60 |
61 | <span class="label label-inverse">Inverse</span>
62 | |
63 |
69 |
72 |
--------------------------------------------------------------------------------
/app/assets/stylesheets/pathway.css:
--------------------------------------------------------------------------------
1 | /*** PATH
2 | **** Passos de algum processo.
3 | ***/
4 | .pathWay {clear: both;}
5 | .pathWay ol:after, .pathWay ul:after {content: " "; display: block; clear: both;}
6 | .pathWay ol, .pathWay ul {margin: 0 0 30px; padding: 0;}
7 | .pathWay li.disable, .pathWay li.disable a {cursor: default;}
8 | .pathWay li, .pathWay li.disabled, .pathWay li.disable:hover {
9 | margin-right: 1px;
10 | list-style: none;
11 | float: left;
12 | overflow: hidden;
13 | background: url(img/dotsPathWays.png) repeat-x bottom left;
14 | -webkit-transition: all .2s ease-out;
15 | -moz-transition: all .2s ease-out;
16 | -ms-transition: all .2s ease-out;
17 | -o-transition: all .2s ease-out;
18 | transition: all .2s ease-out;
19 | }
20 | .pathWay.steps6 li {width: 16.5%;}
21 | .pathWay.steps5 li {width: 19.8%;}
22 | .pathWay.steps4 li {width: 24.9%;}
23 | .pathWay.steps3 li {width: 33.2%;}
24 | .pathWay.steps2 li {width: 49.9%;}
25 | .pathWay.steps1 li {width: 100%;}
26 |
27 | .pathWay a, .pathWay li.disable:hover a {
28 | border-left: 1px dotted #CCC;
29 | border-bottom: 2px solid white;
30 | padding: 5px 0 0 5px;
31 | margin-bottom: 5px;
32 | color: #B0B0B0;
33 | width: 100%;
34 | display: inline-block;
35 | font: 18px Ubuntu, arial, tahoma, sans-serif;
36 | text-transform: uppercase;
37 | background: white url(img/pathWays-whiteGradient.png) repeat-X top;
38 | letter-spacing: -1px;
39 | -webkit-transition: all .2s ease-out;
40 | -moz-transition: all .2s ease-out;
41 | -ms-transition: all .2s ease-out;
42 | -o-transition: all .2s ease-out;
43 | transition: all .2s ease-out;
44 | }
45 | .pathWay li a:hover {text-decoration: none;}
46 | .pathWay li:first-child a {border-left: none;}
47 |
48 | .pathWay span {
49 | display: block;
50 | padding: 16px 0 0 0;
51 | font-size: 12px;
52 | text-transform: capitalize;
53 | }
54 |
55 | .pathWay li b, .pathWay li.disable:hover b {
56 | color: #b8b8b8;
57 | letter-spacing: -3px;
58 | margin-right: 5px;
59 | float: left;
60 | font: bold 50px UbuntuMedium, Ubuntu, Verdana, arial, tahoma, sans-serif ;
61 | -webkit-transition: all .2s ease-out;
62 | -moz-transition: all .2s ease-out;
63 | -ms-transition: all .2s ease-out;
64 | -o-transition: all .2s ease-out;
65 | transition: all .2s ease-out;
66 | }
67 |
68 | .pathWay .stepOk {background-color: #666665;}
69 | .pathWay .stepOk a, .pathWay .stepOk b {color: #666;}
70 |
--------------------------------------------------------------------------------
/app/views/manual/header-principal.html:
--------------------------------------------------------------------------------
1 | Padrão de código do Bootstrap.
70 | <%= clippy(yield(:code)) %> 71 |Header de exemplo
2 | <%= content_for_clippy do %> 3 |
4 |
14 |
15 |
16 |
18 | Sugestões
19 |
41 |
42 | Nome do projeto
20 |
21 | Acessando com Identificador
22 |
40 |
23 | 28424
24 |
37 |
38 | Nome da conta: Gateway 01
39 | -
44 |
- Página inicial 45 |
- Transações 46 |
- Meios de pagamento 47 |
- Ambiente de testes 48 |
54 | <%= clippy(yield(:code)) %>
55 |
56 |
--------------------------------------------------------------------------------
/app/views/manual/popover.html:
--------------------------------------------------------------------------------
1 | Popover
2 | 3 | <%= content_for_clippy do %> 4 | Um input qualquer 5 | 8 | 9 | <% end %> 10 |Opções
11 |As opções devem ser passadas via atributo data, ex: data-animation="false", data-trigger="click".
12 || Name | 16 |type | 17 |default | 18 |description | 19 |
|---|---|---|---|
| animation | 24 |boolean | 25 |true | 26 |Aplica uma transição de fade | 27 |
| placement | 30 |string|function | 31 |'right' | 32 |Onde o popover ficará posicionado - top | bottom | left | right | 33 |
| selector | 36 |string | 37 |false | 38 |Se um seletor é definido, os objetos do popover será delegado para alvos específicos | 39 |
| trigger | 42 |string | 43 |'hover' | 44 |Como o popover é ativado - hover | focus | manual | 45 |
| title | 48 |string | function | 49 |'' | 50 |Título padrão do popover se o atributo title não existir | 51 |
| content | 54 |string | function | 55 |'' | 56 |Conteúdo padrão se o data-content não existir | 57 |
| delay | 60 |number | object | 61 |0 | 62 |
63 | Delay para mostrar e esconder o popover (ms) - não aplicável para ativação manual. 64 |Se um número é fornecido, o delay é aplicado no hide e show. 65 |Estrutura do objeto é: |
67 |
| html | 70 |boolean | 71 |false | 72 |
73 | Permite que o conteúdo tenha código HTML. 74 | |
75 |
80 | <%= clippy(yield(:code)) %>
81 |
82 |
--------------------------------------------------------------------------------
/app/assets/stylesheets/grid.css:
--------------------------------------------------------------------------------
1 | /***
2 | **** O CSS para Mobiles está em mobile.css
3 | **** Neste arquivo fica apenas o necessário para o Grid responsivo funcionar
4 | ***/
5 |
6 | /**!
7 | *** GRID.CSS
8 | **/
9 | .row {
10 | margin-left: -20px;
11 | *zoom: 1;
12 | }
13 | .row:before,
14 | .row:after {
15 | display: table;
16 | content: "";
17 | }
18 | .row:after {
19 | clear: both;
20 | }
21 | [class*="span"] {
22 | float: left;
23 | margin-left: 20px;
24 | }
25 |
26 | /** Outras telas, desktops e até tablets
27 | ***
28 | **/
29 | .limit,
30 | #menuPrincipal > ul,
31 | .container,
32 | .navbar-fixed-top .container,
33 | .navbar-fixed-bottom .container {width: 988px;}
34 |
35 | .span16 {width: 988px;}
36 | .span15 {width: 925px;}
37 | .span14 {width: 862px;}
38 | .span13 {width: 799px;}
39 | .span12 {width: 736px;}
40 | .span11 {width: 673px;}
41 | .span10 {width: 610px;}
42 | .span9 {width: 547px;}
43 | .span8 {width: 484px;}
44 | .span7 {width: 421px;}
45 | .span6 {width: 358px;}
46 | .span5 {width: 295px;}
47 | .span4 {width: 232px;}
48 | .span3 {width: 169px;}
49 | .span2 {width: 106px;}
50 | .span1 {width: 43px;}
51 |
52 | /*input.input120, input.span2 {width:90px !important;}*/
53 |
54 | .span14 {width: 840px;}
55 |
56 | .revisit .shortcutBox h3{ font: 100 18px UbuntuLight, verdana, arial, tahoma, sans-serif; line-height: 25px; letter-spacing: -1px;}
57 | .statusMessageBox .overflowMessage {
58 | overflow: hidden;
59 | position: relative;
60 | min-width: 10%;
61 | max-width: 37%;
62 | }
63 |
64 | /** Desktop
65 | *** Passando de 1220px
66 | **/
67 | @media screen and (min-width: 1220px) {
68 | .limit,
69 | #menuPrincipal > ul,
70 | .container,
71 | .navbar-fixed-top .container,
72 | .navbar-fixed-bottom .container {width: 1180px !important;}
73 |
74 | .pathWay li a, .pathWay li.disable:hover a {font-size: 20px;}
75 |
76 | .span16 {width: 1180px;}
77 | .span15 {width: 1105px;}
78 | .span14 {width: 1030px;}
79 | .span13 {width: 955px;}
80 | .span12 {width: 880px;}
81 | .span11 {width: 805px;}
82 | .span10 {width: 730px;}
83 | .span9 {width: 655px;}
84 | .span8 {width: 580px;}
85 | .span7 {width: 505px;}
86 | .span6 {width: 430px;}
87 | .span5 {width: 355px;}
88 | .span4 {width: 280px;}
89 | .span3 {width: 205px;}
90 | .span2 {width: 130px;}
91 | .span1 {width: 55px;}
92 |
93 | .revisit .shortcutBox h3 {font: 100 20px UbuntuLight, verdana, arial, tahoma, sans-serif;}
94 | }
95 |
96 |
97 |
98 |
99 |
--------------------------------------------------------------------------------
/app/views/manual/sidebar.html:
--------------------------------------------------------------------------------
1 | Elementos da Sidebar
2 | 3 | <%= content_for_clippy do %> 4 |
5 |
54 |
55 | <% end %>
56 |
57 |
58 | <%= clippy(yield(:code)) %>
59 |
60 |
--------------------------------------------------------------------------------
/config/environments/production.rb:
--------------------------------------------------------------------------------
1 | Boostrap::Application.configure do
2 | # Settings specified here will take precedence over those in config/application.rb
3 |
4 | # Code is not reloaded between requests
5 | config.cache_classes = true
6 |
7 | # Full error reports are disabled and caching is turned on
8 | config.consider_all_requests_local = false
9 | config.action_controller.perform_caching = true
10 |
11 | # Disable Rails's static asset server (Apache or nginx will already do this)
12 | config.serve_static_assets = false
13 |
14 | # Compress JavaScripts and CSS
15 | config.assets.compress = true
16 |
17 | # Don't fallback to assets pipeline if a precompiled asset is missed
18 | config.assets.compile = false
19 |
20 | # Generate digests for assets URLs
21 | config.assets.digest = false
22 |
23 | # Defaults to Rails.root.join("public/assets")
24 | # config.assets.manifest = YOUR_PATH
25 |
26 | # Specifies the header that your server uses for sending files
27 | # config.action_dispatch.x_sendfile_header = "X-Sendfile" # for apache
28 | # config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for nginx
29 |
30 | # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
31 | # config.force_ssl = true
32 |
33 | # See everything in the log (default is :info)
34 | # config.log_level = :debug
35 |
36 | # Prepend all log lines with the following tags
37 | # config.log_tags = [ :subdomain, :uuid ]
38 |
39 | # Use a different logger for distributed setups
40 | # config.logger = ActiveSupport::TaggedLogging.new(SyslogLogger.new)
41 |
42 | # Use a different cache store in production
43 | # config.cache_store = :mem_cache_store
44 |
45 | # Enable serving of images, stylesheets, and JavaScripts from an asset server
46 | # config.action_controller.asset_host = "http://assets.example.com"
47 |
48 | # Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
49 | # config.assets.precompile += %w( search.js )
50 |
51 | # Disable delivery errors, bad email addresses will be ignored
52 | # config.action_mailer.raise_delivery_errors = false
53 |
54 | # Enable threaded mode
55 | # config.threadsafe!
56 |
57 | # Enable locale fallbacks for I18n (makes lookups for any locale fall back to
58 | # the I18n.default_locale when a translation can not be found)
59 | config.i18n.fallbacks = true
60 |
61 | # Send deprecation notices to registered listeners
62 | config.active_support.deprecation = :notify
63 |
64 | end
65 |
--------------------------------------------------------------------------------
/app/views/manual/maskedinput.html:
--------------------------------------------------------------------------------
1 | Máscaras de Formulário
2 |Utilizamos o plugin Masked Input para criar máscaras de campos de formulários. No Locaweb Style nós não tratamos nenhuma máscara por default, logo você precisará fazer isso no seu projeto. O funcionamento é muito simples. Você pode definir em uma linha no seu Javascript/JQuery como será a máscara dos determinados inputs.
3 | 4 |<%= content_for_clippy do %>$("#data").mask("99/99/9999");
5 | //Aceita até 9 digitos
6 | $('#telefone').mask("(99) 9999-9999?9").ready(function(event) {
7 | var target, phone, element;
8 | target = (event.currentTarget) ? event.currentTarget : event.srcElement;
9 | phone = target.value.replace(/\D/g, '');
10 | element = $(target);
11 | element.unmask();
12 | if(phone.length > 10) {
13 | element.mask("(99) 99999-999?9");
14 | } else {
15 | element.mask("(99) 9999-9999?9");
16 | }
17 | });
18 | $("#cpf").mask("999.999.999-99");
19 | <% end %>
20 |
21 |
22 |
35 |
36 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 | 37 |
Trocando o Underline por outra coisa
38 |Se você não quer que a máscara fique com os underlines (___), você pode modificar pelo parâmetro placeholder, assim:
39 |
40 | $("#cpf").mask("999.999.999-99",{placeholder:" "});
41 |
42 | Assim, ele mostraria espaços em vez de _ (underline).
43 |
44 |
45 |
46 |
47 | 48 |
Executando uma função
49 |Você pode executar uma função quando o campo for totalmente completo.
50 |
51 | $("#data").mask("99/99/9999",{completed:function(){alert("Você digitou a data: "+this.val());}});
52 |
53 |
54 |
55 |
56 |
57 |
58 | Veja outras funções desse plugin aqui.
59 |
60 | <%= clippy(yield(:code)) %>
61 |
62 |
--------------------------------------------------------------------------------
/app/views/manual/busca-avancada.html:
--------------------------------------------------------------------------------
1 | Busca avançada
2 |A busca avançada já reconhece se os inputs estão marcados com preenchidos. Se estiverem preenchidos, o busca avançada já fica aberto, caso contrário ele aparece fechado.
3 |Quando o usuário clica no botão VOLTAR PARA BUSCA SIMPLES, executa uma ação de limpar os inputs de BUSCA AVANCADA para não submete-los quando o usuário clicar em BUSCAR.
4 |
5 |
58 |
59 | Busca avançada
6 | <%= content_for_clippy do %> 7 | 56 | <% end %> 57 |
60 | <%= clippy(yield(:code)) %>
61 |
62 |
63 |
--------------------------------------------------------------------------------
/app/views/manual/filtro-paginacao.html:
--------------------------------------------------------------------------------
1 | Filtro de exibição e paginação
2 | 3 | <%= content_for_clippy do %> 4 | 30 | 56 | <% end %> 57 |58 | Estrutura HTML da paginação 59 |
60 |61 | Siga o exemplo abaixo para que o estilo da paginação funcione como esperado. 62 |
63 | 64 |
65 | <%= clippy(yield(:code)) %>
66 |
67 |
--------------------------------------------------------------------------------
/app/views/manual/tabela-listagem.html:
--------------------------------------------------------------------------------
1 | Tabelas de listagem
2 | <%= content_for_clippy do %> 3 || Nome do cliente | 7 |# do pedido | 8 |Data - Hora | 9 |Status | 10 |Valor | 11 |Ações | 12 ||
|---|---|---|---|---|---|---|
| Helena da Silva 18 | 22 | | 23 |74994 | 24 |14/03/12 - 11h25 | 25 |Autorizada | 26 |R$ 297,00 | 27 |Ver Detalhes | 28 |Estornar | 29 |
| Helena da Silva 32 | 36 | | 37 |74994 | 38 |14/03/12 - 11h25 | 39 |Autorizada | 40 |R$ 297,00 | 41 |Ver Detalhes | 42 |Estornar | 43 |
| Helena da Silva 46 | 50 | | 51 |74994 | 52 |14/03/12 - 11h25 | 53 |Autorizada | 54 |R$ 297,00 | 55 |Ver Detalhes | 56 |Estornar | 57 |
64 | <%= clippy(yield(:code)) %>
65 |
66 |
--------------------------------------------------------------------------------
/app/views/manual/simple_form.html:
--------------------------------------------------------------------------------
1 | Configuração do Simple Form
2 |Basta sobrescrever a configuração inicial do simple_form que os formulários já estarão formatados.
3 |Pra todo input será gerado uma div > label + input. Caso você não queira a div em volta basta alterar o wrapper do input.
4 |<%= f.input :name, wrapper: :empty %>
5 | 6 |
7 |
64 |
--------------------------------------------------------------------------------
/app/views/manual/listagem-infos.html:
--------------------------------------------------------------------------------
1 | config/initializers/simple_form.rb
8 | <% content_for_clippy do %> 9 | SimpleForm.setup do |config| 10 | config.wrappers :default, :class => :input, :hint_class => :field_with_hint, :error_class => :field_with_errors do |b| 11 | b.use :html5 12 | b.use :placeholder 13 | b.optional :maxlength 14 | b.optional :pattern 15 | b.optional :min_max 16 | b.optional :readonly 17 | b.use :label_input 18 | b.use :hint, :wrap_with => { :tag => :span, :class => :hint } 19 | b.use :error, :wrap_with => { :tag => :span, :class => :error } 20 | end 21 | 22 | config.wrappers :bootstrap, :tag => :div, :class => 'control-group', :error_class => 'error' do |b| 23 | b.use :html5 24 | b.use :placeholder 25 | b.use :label_input 26 | b.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' } 27 | b.use :hint, :wrap_with => { :tag => 'p', :class => 'help-block' } 28 | end 29 | 30 | config.wrappers :empty, :tag => false, :error_class => 'error' do |b| 31 | b.use :html5 32 | b.use :placeholder 33 | b.use :label_input 34 | b.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' } 35 | b.use :hint, :wrap_with => { :tag => 'p', :class => 'help-block' } 36 | end 37 | 38 | config.default_wrapper = :bootstrap 39 | config.boolean_style = :nested 40 | config.button_class = 'btn' 41 | config.error_notification_tag = :div 42 | config.error_notification_class = 'alert alert-error' 43 | # You can wrap each item in a collection of radio/check boxes with a tag, 44 | # defaulting to :span. Please note that when using :boolean_style = :nested, 45 | # SimpleForm will force this option to be a label. 46 | config.item_wrapper_tag = nil 47 | # config.item_wrapper_class = nil 48 | config.label_text = lambda { |label, required| "#{label} #{required}" } 49 | config.label_class = 'control-label' 50 | config.form_class = nil 51 | config.browser_validations = false 52 | # config.file_methods = [ :mounted_as, :file?, :public_filename ] 53 | # config.input_mappings = { /count/ => :integer } 54 | # config.time_zone_priority = nil 55 | # config.country_priority = nil 56 | config.default_input_size = nil 57 | # config.translate_labels = true 58 | # config.inputs_discovery = true 59 | # config.cache_discovery = !Rails.env.development? 60 | end 61 | <% end %> 62 | <%= clippy(yield(:code), :ruby) %> 63 |Listagem de Informações
2 | 3 | <%= content_for_clippy do %> 4 |-
5 |
-
6 |
Identificador: 123456789 | Nome: Lojinha do Régis
7 | 8 | Administrar 9 | 10 |Gateway de pagamentos: (1000 transações)
11 |
12 |
-
15 |
-
16 |
Identificador: 123456789 | Nome: Lojinha com divisões na observação
17 | 18 | Administrar 19 | 20 | Status: Ativo 21 | 22 | Período de renovação: 1 ano 23 | Alterar 24 | 25 |Gateway de pagamentos: (1000 transações)
26 |
27 |
-
30 |
-
31 |
32 | Cielo
33 | 34 | Editar 35 | Desativar 36 | 37 |Gateway de pagamentos: (1000 transações)
38 |
39 | -
40 |
41 |
Cielo
42 | 43 | Editar 44 | Desativar 45 | 46 |
47 | -
48 |
49 | Shopline
50 | 51 | Ativar 52 | Como contratar este convênio? 53 | 54 |
55 | -
56 |
57 | Bradesco
58 | 59 | Ativar 60 | Como contratar este convênio? 61 | 62 |
63 |
67 | <%= clippy(yield(:code)) %>
68 |
69 |
--------------------------------------------------------------------------------
/app/views/manual/erro505.html:
--------------------------------------------------------------------------------
1 | Estrutura de erro 500
2 |
3 |
17 |
22 | <%= content_for_clippy do %>
23 |
24 |
67 |
4 |
14 |
15 |
16 |
18 | Sugestões
19 |
21 | Nome do projeto
20 |
25 |
42 | <% end %>
43 |
44 |
66 |
26 |
41 |
27 |
40 |
28 |
39 | Erro interno do sistema
29 | 30 |Ocorreu uma instabilidade temporária que impediu a exibição do conteúdo. Nossa equipe técnica foi notificada e estamos trabalhando para resolvê-lo.
31 | 32 |Você pode:
33 |-
34 |
- Recarregar a página clicando no botão Atualizar do seu navegador. 35 |
- Retornar à página inicial. 36 |
- Se o problema persistir, entre em contato com nossa Central de Ajuda e Suporte 37 |
68 | <%= clippy(yield(:code)) %>
69 |
70 |
--------------------------------------------------------------------------------
/vendor/assets/javascripts/masked-input.js:
--------------------------------------------------------------------------------
1 | /* Masked Input plugin for jQuery Version: 1.3*/
2 | (function(a){var b=(a.browser.msie?"paste":"input")+".mask",c=window.orientation!=undefined;a.mask={definitions:{9:"[0-9]",a:"[A-Za-z]","*":"[A-Za-z0-9]"},dataName:"rawMaskFn"},a.fn.extend({caret:function(a,b){if(this.length!=0){if(typeof a=="number"){b=typeof b=="number"?b:a;return this.each(function(){if(this.setSelectionRange)this.setSelectionRange(a,b);else if(this.createTextRange){var c=this.createTextRange();c.collapse(!0),c.moveEnd("character",b),c.moveStart("character",a),c.select()}})}if(this[0].setSelectionRange)a=this[0].selectionStart,b=this[0].selectionEnd;else if(document.selection&&document.selection.createRange){var c=document.selection.createRange();a=0-c.duplicate().moveStart("character",-1e5),b=a+c.text.length}return{begin:a,end:b}}},unmask:function(){return this.trigger("unmask")},mask:function(d,e){if(!d&&this.length>0){var f=a(this[0]);return f.data(a.mask.dataName)()}e=a.extend({placeholder:"_",completed:null},e);var g=a.mask.definitions,h=[],i=d.length,j=null,k=d.length;a.each(d.split(""),function(a,b){b=="?"?(k--,i=a):g[b]?(h.push(new RegExp(g[b])),j==null&&(j=h.length-1)):h.push(null)});return this.trigger("unmask").each(function(){function v(a){var b=f.val(),c=-1;for(var d=0,g=0;dEstrutura de erro 404
2 |3 | 4 |
5 |
15 |
16 |
17 |
19 | Sugestões
20 |
42 |
43 | Nome do projeto
21 |
22 | Acessando com Identificador
23 |
41 |
24 | 28424
25 |
38 |
39 | Nome da conta: Gateway 01
40 | -
45 |
- Página inicial 46 |
- Transações 47 |
- Meios de pagamento 48 |
54 |
70 | <% end %>
71 |
72 |
94 |
95 |
55 |
69 |
56 |
68 |
57 |
67 | Página não encontrada
58 | 59 |O conteúdo pode ter sido removido ou não estar mais disponível.
60 | 61 |Você pode:
62 |-
63 |
- Verificar se digitou corretamente o endereço desejado. 64 |
- Retornar à página inicial 65 |
96 | <%= clippy(yield(:code)) %>
97 |
98 |
--------------------------------------------------------------------------------
/Gemfile.lock:
--------------------------------------------------------------------------------
1 | GEM
2 | remote: https://rubygems.org/
3 | specs:
4 | actionmailer (3.2.2)
5 | actionpack (= 3.2.2)
6 | mail (~> 2.4.0)
7 | actionpack (3.2.2)
8 | activemodel (= 3.2.2)
9 | activesupport (= 3.2.2)
10 | builder (~> 3.0.0)
11 | erubis (~> 2.7.0)
12 | journey (~> 1.0.1)
13 | rack (~> 1.4.0)
14 | rack-cache (~> 1.1)
15 | rack-test (~> 0.6.1)
16 | sprockets (~> 2.1.2)
17 | activemodel (3.2.2)
18 | activesupport (= 3.2.2)
19 | builder (~> 3.0.0)
20 | activerecord (3.2.2)
21 | activemodel (= 3.2.2)
22 | activesupport (= 3.2.2)
23 | arel (~> 3.0.2)
24 | tzinfo (~> 0.3.29)
25 | activeresource (3.2.2)
26 | activemodel (= 3.2.2)
27 | activesupport (= 3.2.2)
28 | activesupport (3.2.2)
29 | i18n (~> 0.6)
30 | multi_json (~> 1.0)
31 | addressable (2.3.2)
32 | arel (3.0.2)
33 | builder (3.0.0)
34 | childprocess (0.3.8)
35 | ffi (~> 1.0, >= 1.0.11)
36 | coderay (1.0.6)
37 | coffee-rails (3.2.2)
38 | coffee-script (>= 2.2.0)
39 | railties (~> 3.2.0)
40 | coffee-script (2.2.0)
41 | coffee-script-source
42 | execjs
43 | coffee-script-source (1.2.0)
44 | diff-lcs (1.1.3)
45 | erubis (2.7.0)
46 | execjs (1.3.0)
47 | multi_json (~> 1.0)
48 | ffi (1.3.1)
49 | god (0.12.1)
50 | hike (1.2.1)
51 | i18n (0.6.0)
52 | jasmine (1.3.1)
53 | jasmine-core (~> 1.3.1)
54 | rack (~> 1.0)
55 | rspec (>= 1.3.1)
56 | selenium-webdriver (>= 0.1.3)
57 | jasmine-core (1.3.1)
58 | journey (1.0.3)
59 | json (1.6.5)
60 | kgio (2.7.3)
61 | libwebsocket (0.1.7.1)
62 | addressable
63 | websocket
64 | mail (2.4.4)
65 | i18n (>= 0.4.0)
66 | mime-types (~> 1.16)
67 | treetop (~> 1.4.8)
68 | mime-types (1.17.2)
69 | multi_json (1.6.0)
70 | polyglot (0.3.3)
71 | rack (1.4.1)
72 | rack-cache (1.2)
73 | rack (>= 0.4)
74 | rack-ssl (1.3.2)
75 | rack
76 | rack-test (0.6.1)
77 | rack (>= 1.0)
78 | rails (3.2.2)
79 | actionmailer (= 3.2.2)
80 | actionpack (= 3.2.2)
81 | activerecord (= 3.2.2)
82 | activeresource (= 3.2.2)
83 | activesupport (= 3.2.2)
84 | bundler (~> 1.0)
85 | railties (= 3.2.2)
86 | railties (3.2.2)
87 | actionpack (= 3.2.2)
88 | activesupport (= 3.2.2)
89 | rack-ssl (~> 1.3.2)
90 | rake (>= 0.8.7)
91 | rdoc (~> 3.4)
92 | thor (~> 0.14.6)
93 | raindrops (0.8.0)
94 | rake (0.9.2.2)
95 | rdoc (3.12)
96 | json (~> 1.4)
97 | rspec (2.12.0)
98 | rspec-core (~> 2.12.0)
99 | rspec-expectations (~> 2.12.0)
100 | rspec-mocks (~> 2.12.0)
101 | rspec-core (2.12.2)
102 | rspec-expectations (2.12.1)
103 | diff-lcs (~> 1.1.3)
104 | rspec-mocks (2.12.2)
105 | rubyzip (0.9.9)
106 | sass (3.1.15)
107 | sass-rails (3.2.4)
108 | railties (~> 3.2.0)
109 | sass (>= 3.1.10)
110 | tilt (~> 1.3)
111 | selenium-webdriver (2.25.0)
112 | childprocess (>= 0.2.5)
113 | libwebsocket (~> 0.1.3)
114 | multi_json (~> 1.0)
115 | rubyzip
116 | sprockets (2.1.2)
117 | hike (~> 1.2)
118 | rack (~> 1.0)
119 | tilt (~> 1.1, != 1.3.0)
120 | thor (0.14.6)
121 | tilt (1.3.3)
122 | treetop (1.4.10)
123 | polyglot
124 | polyglot (>= 0.3.1)
125 | tzinfo (0.3.32)
126 | uglifier (1.0.4)
127 | execjs (>= 0.3.0)
128 | multi_json (>= 1.0.2)
129 | unicorn (4.2.0)
130 | kgio (~> 2.6)
131 | rack
132 | raindrops (~> 0.7)
133 | websocket (1.0.7)
134 |
135 | PLATFORMS
136 | ruby
137 |
138 | DEPENDENCIES
139 | coderay (~> 1.0.6)
140 | coffee-rails (~> 3.2.1)
141 | god (~> 0.12.1)
142 | jasmine (~> 1.3.1)
143 | rails (= 3.2.2)
144 | sass-rails (~> 3.2.3)
145 | selenium-webdriver (= 2.25.0)
146 | uglifier (~> 1.0.3)
147 | unicorn (~> 4.2.0)
148 |
--------------------------------------------------------------------------------
/app/assets/stylesheets/toolbar.css:
--------------------------------------------------------------------------------
1 | #toolbar {
2 | background:url(img/bgToolbar.png) repeat-X center center;
3 | position:relative;
4 | font: 300 12px verdana, tahoma, arial, helvetica, sans-serif;
5 | position: relative;
6 | z-index: 2;
7 | }
8 | #toolbar .limitToolbar {position:relative; max-width: 1180px; margin:0 auto; height:33px;}
9 |
10 | #toolbar ul {margin:0; padding:0;}
11 | #toolbar li {list-style:none;}
12 |
13 | #toolbar h1.logoToolbar {
14 | text-indent: 100%;
15 | white-space: nowrap;
16 | overflow: hidden;
17 | width:80px; height:18px;
18 | margin:-9px 0 0 0;
19 | position:absolute;
20 | top:50%;
21 | background:url(img/tit-toolBar.png) no-repeat left center;
22 | }
23 |
24 | #toolbar .menuToolbar {
25 | position:absolute;
26 | left:260px; top:50%;
27 | height:34px;
28 | margin-top:-17px;
29 | }
30 | #toolbar .menuToolbar li {float:left;}
31 | #toolbar .menuToolbar li a {
32 | margin:1px 0 0;
33 | float: left;
34 | text-decoration: none;
35 | text-transform: uppercase;
36 | color: white;
37 | font: 300 12px Ubuntu;
38 | background: #373737 url(img/bgOptToolbar.png) repeat-X left center;
39 | border-right: 1px solid #444;
40 | border-left: 1px solid #242424;
41 | height: 32px;
42 | line-height: 32px;
43 | padding: 0 20px;
44 | }
45 | #toolbar .menuToolbar li a:hover {background:#333; text-decoration:none;}
46 |
47 | #toolbar .userName, #toolbar .logOut {float:right;}
48 |
49 | #toolbar .userName {
50 | background: url(img/bgUsuario.png) no-repeat left center;
51 | font-size: 13px;
52 | height: 17px;
53 | color: #D1D1D1;
54 | padding: 0 15px 3px 32px;
55 | border-right: 1px solid #616161;
56 | margin: 7px 15px 0 0;
57 | }
58 |
59 | #toolbar .logOut {
60 | font-size: 13px;
61 | color: #D1D1D1;
62 | background: url(img/btSair.png) no-repeat center center;
63 | padding: 2px 8px 2px 30px;
64 | margin: 5px 0 0;
65 | }
66 | #toolbar .logOut:hover {color:#FFF; text-decoration:none;}
67 |
68 | /**** RESPONSIVE TOOLBAR ****/
69 | @media screen and (max-width:480px) {
70 | #toolbar .limitToolbar {width:100%; height:auto; overflow: hidden;}
71 | #toolbar h1.logoToolbar {width:80px; background-size:auto; float:left; position:static; margin:7px 0 5px 10px;}
72 | #toolbar .menuToolbar {
73 | text-align:center;
74 | height:30px;
75 | width:100%;
76 | clear:left;
77 | position:static;
78 | }
79 | #toolbar .menuToolbar li {margin-right:-5px;float:none; display:inline-block;}
80 | #toolbar .menuToolbar li:last-child {margin-right:0;}
81 | #toolbar .menuToolbar li a {
82 | height:29px;
83 | line-height:29px;
84 | font-size:10px;
85 | padding:0 10px;
86 | }
87 | #toolbar .userName {
88 | margin:0;
89 | font-size:10px; background:none;
90 | float:none;
91 | position: absolute; top:8px; right:50px;
92 | }
93 | #toolbar .logOut {
94 | margin:0;
95 | float:none;
96 | background:#333;
97 | padding:3px 5px;
98 | font-size:12px;
99 | position: absolute; top:5px; right:8px;
100 | }
101 | }
102 |
103 | @media screen and (min-width:481px) and (max-width:640px) {
104 | #toolbar .limitToolbar {width:100%; height:63px;}
105 | #toolbar h1.logoToolbar {float:left; position:static; margin:7px 0 5px 10px;}
106 | #toolbar .menuToolbar {text-align:center; height:30px; position:absolute; top:50px; left:0; width:100%; clear:left;}
107 | #toolbar .menuToolbar li {
108 | float:none;
109 | display:inline-block;
110 | }
111 | #toolbar .menuToolbar li a {
112 | display: inline-block;
113 | text-decoration: none;
114 | text-transform: uppercase;
115 | color: white;
116 | font: 300 12px Ubuntu;
117 | background: #373737 url(img/bgOptToolbar.png) repeat-X left center;
118 | border-right: 1px solid #444;
119 | border-left: 1px solid #242424;
120 | height: 29px;
121 | line-height: 29px;
122 | padding: 0 20px;
123 | margin-left: -4px;
124 | width: 124px;
125 | }
126 | #toolbar .userName {
127 | margin:0;
128 | font-size:10px; background:none;
129 | float:none;
130 | position: absolute; top:8px; right:50px;
131 | }
132 | #toolbar .logOut {
133 | margin:0;
134 | float:none;
135 | background:#333;
136 | padding:3px 5px;
137 | font-size:12px;
138 | position: absolute; top:5px; right:8px;
139 | }
140 | }
141 |
142 |
--------------------------------------------------------------------------------
/app/assets/stylesheets/manual/coderay.css:
--------------------------------------------------------------------------------
1 | .code_block {
2 | margin: 12px 0;
3 | }
4 |
5 | .code_header {
6 | position: relative;
7 | background-color: #E0E0E0;
8 | font-size: 12px;
9 | padding: 4px 7px;
10 | border: solid 1px #B6B6B6;
11 | border-bottom: none;
12 | }
13 |
14 | .code_header .clippy {
15 | position: absolute;
16 | top: 4px;
17 | right: 7px;
18 | }
19 |
20 | .clippy_label {
21 | position: absolute;
22 | right: 20px;
23 | top: 1px;
24 | text-align: right;
25 | width: 200px;
26 | font-size: 10px;
27 | color: #555;
28 | }
29 |
30 | .CodeRay {
31 | overflow: auto;
32 | border: 1px solid #777;
33 | border-top: none;
34 | padding: 5px 7px;
35 | margin: 0;
36 | line-height: 17px;
37 | font-size: 12px;
38 | }
39 |
40 | code {
41 | border: solid 1px #CCC;
42 | background-color: #EEE;
43 | font-family: 'Menlo', 'Courier New', 'Terminal', monospace;
44 | padding: 0 3px;
45 | }
46 |
47 | pre code {
48 | display: block;
49 | background-color: #EEE;
50 | padding: 5px 7px;
51 | }
52 |
53 | .CodeRay, .CodeRay pre {
54 | font-family: 'Menlo', 'Courier New', 'Terminal', monospace;
55 | background-color: #232323;
56 | color: #E6E0DB;
57 | padding: 5px;
58 | }
59 | .CodeRay pre {
60 | margin: 0px;
61 | padding: 0px;
62 | }
63 |
64 | .CodeRay .annotation { }
65 | .CodeRay .attribute-name { color:#F9EE91; }
66 | .CodeRay .attribute-value { }
67 | .CodeRay .binary { }
68 | .CodeRay .char .content { }
69 | .CodeRay .char .delimiter { }
70 | .CodeRay .char { }
71 | .CodeRay .class { color:#9B703F; }
72 | .CodeRay .class-variable { }
73 | .CodeRay .color { }
74 | .CodeRay .comment { color:#726E73; font-style:italic; }
75 | .CodeRay .comment .char { }
76 | .CodeRay .comment .delimiter { }
77 | .CodeRay .complex { }
78 | .CodeRay .constant { color:#9B859D; }
79 | .CodeRay .decorator { }
80 | .CodeRay .definition { }
81 | .CodeRay .delimiter { color:#8F9D6A; }
82 | .CodeRay .directive { color:#9B703C; }
83 | .CodeRay .doc { }
84 | .CodeRay .doc-string { }
85 | .CodeRay .doctype { color:#494946; }
86 | .CodeRay .entity { color:#AB8253; }
87 | .CodeRay .error { }
88 | .CodeRay .escape { }
89 | .CodeRay .exception { }
90 | .CodeRay .float { color:#CA7840; }
91 | .CodeRay .function { color:#9B703F; }
92 | .CodeRay .global-variable { color:#889AB4; }
93 | .CodeRay .hex { }
94 | .CodeRay .imaginary { }
95 | .CodeRay .include { }
96 | .CodeRay .inline { color: white; }
97 | .CodeRay .inline-delimiter { color:white; }
98 | .CodeRay .instance-variable { color:#7587A6 }
99 | .CodeRay .integer { color:#A4C260 }
100 | .CodeRay .key .char { }
101 | .CodeRay .key .delimiter { }
102 | .CodeRay .key { color: #E0C589; }
103 | .CodeRay .keyword { color:#D6B57F; }
104 | .CodeRay .label { }
105 | .CodeRay .local-variable { }
106 | .CodeRay .namespace { }
107 | .CodeRay .octal { }
108 | .CodeRay .operator { }
109 | .CodeRay .predefined { color:#CDA869; }
110 | .CodeRay .predefined-constant { }
111 | .CodeRay .predefined-type { }
112 | .CodeRay .preprocessor { }
113 | .CodeRay .pseudo-class { color:#A0AB7F; }
114 | .CodeRay .regexp .content { }
115 | .CodeRay .regexp .delimiter { }
116 | .CodeRay .regexp .modifier { }
117 | .CodeRay .regexp { }
118 | .CodeRay .reserved { }
119 | .CodeRay .shell .content { }
120 | .CodeRay .shell .delimiter { }
121 | .CodeRay .shell { }
122 | .CodeRay .string .char { }
123 | .CodeRay .string .content { }
124 | .CodeRay .string .delimiter { }
125 | .CodeRay .string .modifier { }
126 | .CodeRay .string { color:#A0AB7F; }
127 | .CodeRay .symbol .content { }
128 | .CodeRay .symbol .delimiter { }
129 | .CodeRay .symbol { color:#CF694A; }
130 | .CodeRay .tag { color:#A9885B; }
131 | .CodeRay .type { }
132 | .CodeRay .value { color: #F9EE98; }
133 | .CodeRay .variable { color:#889AB4; }
134 | .CodeRay pre {
135 | background-color: transparent;
136 | border: none;
137 | }
138 |
139 | .clippy_wapper {
140 | position: relative;
141 | font-size: 12px;
142 | padding: 4px 7px;
143 | margin: 10px 0 0 0;
144 | height: 15px;
145 | background-color: #E0E0E0;
146 | border: solid 1px #B6B6B6;
147 | border-bottom: none;
148 | }
149 |
150 | .clippy_wapper .clippy {
151 | position: absolute;
152 | top: 4px;
153 | right: 7px;
154 | }
155 |
--------------------------------------------------------------------------------
/app/views/manual/boaspraticas.html:
--------------------------------------------------------------------------------
1 | Boas práticas de escrita front-end
2 | 3 |Como este é um projeto onde várias pessoas escrevem código front, precisamos manter alguns padrões de escrita. Isso é importante para que o projeto perdure e que novos integrantes entendam facilmente como tudo funciona.
4 | 5 |Quando definimos um padrão de escrita de código, queremos que o código seja uniforme. Isso quer dizer que o código precisa parecer que foi escrito por uma única pessoa. Assim, conseguimos manter a manutenção mais simples, garantindo que o projeto seja flexível e escalável de forma consistente. Abaixo separamos algumas das regras que devemos seguir para manter isso tudo funcionando.
6 | 7 |Pode ser que tenha alguma regra que você goste ou não esteja familiarizado. Infelizmente, você vai precisa seguir. Todo mundo tem um gosto e não é possível manter o gosto de todos, por isso precisamos escolher apenas um.
8 | 9 |Estrutura básica para iniciar um HTML
10 |Senhor programador back-end, utilize esse código para iniciar seu HTML.
11 |12 | <!DOCTYPE html> 13 | <html lang="pt-br"> 14 | <head> 15 | <title></title> 16 | <meta charset="utf-8"> 17 | </head> 18 | <body> 19 | 20 | </body> 21 | </html> 22 |23 | 24 |
Espaços em brancos
25 |Escolher entre tabs e espaços sempre é uma dúvida terrível. Mesmo assim, quando se trata de HTML/CSS e Javascript, o padrão sempre foi TABs, embora usemos espaços em linguagens como Ruby, Python e etc.
26 | 27 |Descrição de várias classes ou IDs
28 | Como tratamos vários patterns, precisamos sempre reutilizar muito código para manter a uniformidade visual dos elementos e facilitar a manutenção. Por isso, as vezes, precisamos definir o mesmo estilo para vários elementos, assim: 29 | 30 |
31 | .collapseGroup summary span,
32 | .boxGray.listDetail a,
33 | .serviceName a,
34 | [class^="ico"],
35 | [class*=" ico"]
36 | #menuPrincipal .btMenu a,
37 | #menuPrincipal .parent:hover > a,
38 | #menuPrincipal .parent > a:hover,
39 | #menuPrincipal > ul > li > a:hover {color: #4B7CB8;}
40 |
41 |
42 | Para não ficar uma linha muito grande com vários elementos definidos, quebramos linha a cada seletor criado. Isso mantém a leitura legível e nos ajuda a identificar erros. Não se preocupe, o Ruby vai minificar todo esse código depois, por isso, ele não vai para a produção dessa forma.
43 | 44 |Encoding
45 |Eu sei que eu não preciso dizer, mas quem sabe, não é?
46 | O encoding utilizado é o padrão da web inteira: UTF-8.
<meta charset="utf-8">49 |
SEM BOM! Pelo amor de Deus.
50 | 51 |Referências de Entidades
52 | NUNCA use entidades do HTML. Como nós utilizamos UTF-8, coloque o caractere diretamente. 53 |O simbolo do Euro é €. Cifrão $54 | 55 |
Cores
56 |Sempre que utilizar uma cor hexadecimal que tenha repetição de valores, use sempre o valor de atalho, assim:
57 |
58 | /** Recomendado **/
59 | p {color: #AAA;}
60 |
61 | /** Não Recomendado **/
62 | p {color: #AAAAAA;}
63 |
64 |
65 | RGBA
66 | Sempre que possível, utilize RGBA e mantenha o fallback para browsers antigos. Nós utilizamos Modernizr para que isso seja simples. Um exemplo: 67 |
68 | p { color: rgba(0, 0, 0, 0.5); }
69 | .no-rgba p { color: #000; }
70 |
71 |
72 |
73 | Aspas
74 |Tanto no CSS quanto no HTML utilizamos ASPAS DUPLAS. Nunca aspas simples, a não ser no Javascript/JQuery.
75 |
76 | input[type="checkout"] { ... }
77 | div:after { content: " "; }
78 |
79 |
80 | Comentários
81 |Para uma seção:
82 |83 | /*** HEADER 84 | **** Header principal do site 85 | ***/ 86 |87 | 88 |
Nunca use comentários na mesma linha da propriedade:
89 |
90 | p {color: #FFF;} /** Nunca use comentários assim **/
91 |
92 | p {color: #FFF; /** Nunca use comentários assim **/}
93 |
94 |
95 | Assim é melhor:
96 |
97 |
98 | /** Assim é melhor **/
99 | p {
100 | color: #FFF;
101 | background: red;
102 | margin: 0;
103 |
104 | /** Assim também é bom **/
105 | padding: 0;
106 | }
107 |
108 |
--------------------------------------------------------------------------------
/app/assets/stylesheets/functionalclasses.css:
--------------------------------------------------------------------------------
1 | /**
2 | *** FLOAT E CLEAR
3 | **/
4 | .noFloat {float: none !important;}
5 | .fRight {float: right !important;}
6 | .fLeft {float: left !important;}
7 |
8 | .cBoth {clear: both !important;}
9 | .cRight {clear: right !important;}
10 | .cLeft {clear: left !important;}
11 |
12 | .overflowHidden { overflow: hidden !important;}
13 | .overflowVisible {overflow: visible !important;}
14 |
15 | /**
16 | *** BLOCO E LINHA
17 | **/
18 | .dBlock {display: block !important;}
19 | .dInline {display: inline !important; float: none !important;}
20 | .dInlineBlock {display: inline-block !important; float: none !important;}
21 | .dNone, .hide {display: none !important;}
22 |
23 | /**
24 | *** TAMANHO
25 | **/
26 | .widthAuto {width: auto !important;}
27 | .widthInherit {width: inherit;}
28 | .heightInherit {height: inherit;}
29 | .heightAuto {height: auto !important;}
30 |
31 | /**
32 | *** MARGIN E PADDING
33 | **/
34 | .noMargin {margin: 0 !important;}
35 | .noMarginLeft, .row.noMarginLeft {margin-left: 0 !important;}
36 | .noMarginRight {margin-right: 0 !important;}
37 | .noMarginTop {margin-top: 0 !important;}
38 | .noMarginBottom {margin-bottom: 0 !important;}
39 |
40 | .noPadding {padding: 0 !important;}
41 | .noPaddingLeft {padding-left: 0 !important;}
42 | .noPaddingRight {padding-right: 0 !important;}
43 | .noPaddingTop {padding-top: 0 !important;}
44 | .noPaddingBottom {padding-bottom: 0 !important;}
45 |
46 | .marginAuto {
47 | margin-left: auto !important;
48 | margin-right: auto !important;
49 | }
50 |
51 | .marginBottom40 {margin-bottom: 40px;}
52 |
53 | /**
54 | *** ALINHAMENTO DE TEXTO
55 | **/
56 | .txtLeft {text-align: left !important;}
57 | .txtRight {text-align: right !important;}
58 | .txtJustify {text-align: justify !important;}
59 | .txtCenter {text-align: center !important;}
60 |
61 | table.txtLeft td, table.txtLeft th {text-align: left;}
62 | table.txtRight td, table.txtRight th {text-align: right;}
63 |
64 | /**
65 | *** ALINHAMENTO VERTICAL
66 | **/
67 | .vAlignTop {vertical-align: top !important;}
68 | .vAlignMiddle {vertical-align: middle !important;}
69 | .vAlignBottom {vertical-align: bottom !important;}
70 | .vAlignTopImportant {vertical-align: top !important;}
71 | .vAlignMiddleImportant {vertical-align: middle !important;}
72 | .vAlignBottomImportant {vertical-align: bottom !important;}
73 |
74 | /**
75 | *** BACKGROUND E BORDA
76 | **/
77 | .noBackground {background: none !important;}
78 | .noShadow {box-shadow: none !important;}
79 |
80 | .noBorder {border: none !important;}
81 | .noBorderRight {border-right: none !important;}
82 | .noBorderLeft {border-left: none !important;}
83 | .noBorderBottom {border-bottom: none !important;}
84 | .noBorderTop {border-top: none !important;}
85 |
86 | .noBullet, .noListStyle {list-style: none !important;}
87 |
88 | /**
89 | *** CURSOR DE MOUSE
90 | **/
91 | .cursorPointer {cursor: pointer !important;}
92 | .cursorDefault {cursor: default !important;}
93 | .cursorCrosshair {cursor: crosshair !important;}
94 | .cursorMove {cursor: move !important;}
95 | .cursorHelp {cursor: help !important;}
96 | .cursorWait {cursor: wait !important;}
97 | .cursorInherit {cursor: inherit !important;}
98 | .cursorText {cursor: text !important;}
99 | .cursorProgress {cursor: progress !important;}
100 |
101 | .cursorGrab {
102 | cursor: hand;
103 | cursor: grab;
104 | cursor: -o-grab;
105 | cursor: -ms-grab;
106 | cursor: -moz-grab;
107 | cursor: -webkit-grab;
108 | }
109 | .cursorGrabbing {
110 | cursor: grabbing;
111 | cursor: -o-grabbing;
112 | cursor: -ms-grabbing;
113 | cursor: -moz-grabbing;
114 | cursor: -webkit-grabbing;
115 | }
116 |
117 | .ellipsis {
118 | overflow: hidden;
119 | text-overflow: ellipsis;
120 | white-space: nowrap;
121 | display: inline-block !important;
122 | }
123 | .noBold {font-weight: normal!important;}
124 | .noBgHover {background: none!important;}
125 | .noRadius{
126 | border-radius: 0!important;
127 | -moz-border-radius: 0!important;
128 | -webkit-border-radius: 0!important;
129 | }
130 |
131 | /** COLORS **/
132 | .bgWhite {background: white!important;}
133 | .colorBlack {color: #000!important;}
134 |
135 | /**
136 | *** INPUTS
137 | **/
138 | .noSpin::-webkit-inner-spin-button {-webkit-appearance: none;}
139 |
140 | /**
141 | *** HR - LINHA HORIZONTAL
142 | **/
143 | hr, hr.sepDot {border: none; border-bottom: 1px solid #e5e5e5; background: none; display: block; margin: 15px 0;}
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | Locaweb Style Guide
2 | =================
3 |
4 | O Locaweb Style são os padrões de interface utilizados nos produtos da Locaweb. Ele explora um simples e flexível HTML, CSS e Javascript para as necessidades comuns na manutenção e criação dos nossos serviços.
5 |
6 | Este projeto foi criado para manter uniforme a identidade de todas as interfaces dos produtos da Locaweb. Outro objetivo importante para tal iniciativa é a uniformização do código da Locaweb, melhorando a perfomance de produção, facilitando o aprendizado de novos integrantes e agilizando a implementação de novas ideias.
7 |
8 | Com essa estrutura, a Locaweb integra de forma consistente as necessidades de interface e programação, trabalhando em um código client-side robusto e escalável. Assim mantemos a fidelidade do layout sob um código limpo e enxuto, que se adequa às necessidades dos programadores.
9 |
10 | Caso você tenha alguma sugestão para melhorar a inteligência destes códigos, entre em contato conosco. Novas idéias são sempre bem vindas.
11 | ________
12 |
13 | Instalando e contribuindo
14 | =================
15 | Mas que coisa linda você contribuir com seu código. Seja bem-vindo.
16 |
17 | Embora só utilizemos arquivos estáticos no [Locaweb Style](http://developer.locaweb.com.br/locawebstyle/), toda a estrutura é baseada em ruby/rails para compilarmos os assets. Por isso você precisa saber como rodar aplicações rails em sua máquina. Se você não sabe, [dá uma procurada no Google](http://lmgtfy.com/?q=como+rodar+rails). Se você já sabe fazer isso, basta clonar o projeto e rodar a aplicação. Rode um bundle da vida para poder instalar alguma dependência e etc…
18 |
19 | Arquivos
20 | ---
21 | Todos os arquivos que criamos estão dentro de app/assets/javascripts e app/assets/stylesheets.
22 | Os arquivos de terceiros estão dentro da pasta /vendor/assets/javascripts e /vendor/assets/stylesheets. Nestas pastas você encontra por exemplo o Bootstrap, jQuery e etc...
23 |
24 | ----
25 |
26 |
27 | Baseado em que?
28 | -----------
29 | Este projeto foi baseado em alguns frameworks já conhecidos de todos os desenvolvedores
30 |
31 | ***Bootstrap***
32 |
33 | Os estilos e comportamentos foram baseados no Bootstrap, framework criado pelo [Mark Otto](http://twitter.com/mdo/) e [Jacob Thornton](http://twitter.com/fat) para agilizar a criação de interface do Twitter.
34 |
35 | Se você não conhece, visite o github do projeto e conheça já!
36 | [Bootstrap](twitter.github.com/bootstrap/)
37 |
38 | *Curiosidade* --
39 | Dentro do Bootstrap eles usam o Normalize, que é um CSS Reset bastante completo. Ele reseta e compatibiliza alguns problemas de textos e valores padrões em elementos HTML. O Normalize foi criado por [Nicolas Gallagher](@necolas) e [Jonathan Neal](@jon_neal).
40 | [Dê uma olhada no projeto](http://necolas.github.com/normalize.css/)
41 |
42 | ***JQuery***
43 |
44 | O JQuery é o framework mais utilizado para controlar comportamentos de elementos e outras coisinhas mais. Acho que ele dispensa apresentações. [Link do projeto](http://jquery.com)
45 |
46 |
47 | ***Modernizr***
48 |
49 | O Modernizr é um script de detecção de suporte HTML5. Ele nos avisa se o browser suporta ou não suporta as novas propriedades do CSS, nos dando a possibilidade de criar fallbacks para os browsers incompatíveis. Assim fica muito fácil saber qual browser suporta ou não SVG, Canvas, RGBA, drop shadow, gradiente e tudo o mais.
50 |
51 | Ele foi criado por desenvolvedores muito renomados como [Paul Irish](http://paulirish.com/) e [Faruk Ates](http://farukat.es/). [Site do projeto](http://www.modernizr.com/)
52 |
53 | ***Select2***
54 |
55 | [Select2](http://ivaynberg.github.com/select2/) é um plugin para customização de selects (ou como muitos chamam “combo box”) muito útil e flexível. Ele é o melhor plugin para executar essa tarefa por que ele mantém a acessibilidade. Você consegue navegar via teclado e etc. Para ver como o Locaweb Style utiliza, [visite esse link](http://developer.locaweb.com.br/locawebstyle/formularios/entendendo-os-selects/).
56 |
57 | ***Masked Input***
58 |
59 | [Masked Input](http://digitalbush.com/projects/masked-input-plugin/) é um plugin para a criação de máscaras para formulários. É muito simples de utilizar. Para ver seu funcionamento, [clique aqui](http://developer.locaweb.com.br/locawebstyle/formularios/mascaras-formularios/).
60 |
61 | -----
62 |
63 | ***Changelog***
64 |
65 | Para verificar o changelog, visite a página oficial: [http://developer.locaweb.com.br/locawebstyle/introducao/changelog/](http://developer.locaweb.com.br/locawebstyle/introducao/changelog/)
66 |
--------------------------------------------------------------------------------
/app/assets/stylesheets/modal.css:
--------------------------------------------------------------------------------
1 | /** MODAL **/
2 | .modal {
3 | padding: 10px;
4 | max-height: 590px;
5 | display: none;
6 | overflow: hidden;
7 | word-break: normal;
8 | }
9 |
10 | .modalSmall {
11 | width: 450px;
12 | margin-left: -200px;
13 | }
14 |
15 | .modal-header {
16 | border: none;
17 | padding-bottom: 0;
18 | padding: 0;
19 | margin: 0;
20 | }
21 | .modal-header .close {
22 | float: right;
23 | font-size: 20px;
24 | font-weight: bold;
25 | line-height: 20px;
26 | color: #000;
27 | text-shadow: 0 1px 0 #fff;
28 | opacity: 0.2;
29 | filter: alpha(opacity=20);
30 | }
31 |
32 | .modal-header .close:hover {
33 | color: #000;
34 | text-decoration: none;
35 | cursor: pointer;
36 | opacity: 0.4;
37 | filter: alpha(opacity=40);
38 | }
39 |
40 | .modal-header button.close {
41 | padding: 0;
42 | cursor: pointer;
43 | background: transparent;
44 | border: 0;
45 | -webkit-appearance: none;
46 | }
47 |
48 | .modal h1 {
49 | max-width: 490px;
50 | margin: 0 auto 10px;
51 | }
52 |
53 | .modal-header h3 {
54 | text-align: left;
55 | margin: 0;
56 | color: #000;
57 | padding: 0 5px 10px;
58 | font-size: 20px;
59 | font-weight: 400;
60 | border-bottom: 1px solid #EEE;
61 | font: 400 20px Ubuntu, arial, verdana, tahoma, sans-serif;
62 | }
63 |
64 | .modal-header p {padding: 0 5px;}
65 | .modal-header h3 + p {padding-top: 20px;}
66 |
67 | .modal-body {
68 | padding: 15px 5px 0;
69 | min-height: auto;
70 | margin: 0 0 15px;
71 | }
72 |
73 | .modal-body .titAlert {
74 | font: bold 18px verdana, arial, tahoma, sans-serif;
75 | padding: 15px 0;
76 | }
77 |
78 | .modal-body p {
79 | line-height: 18px;
80 | margin: 0 0 10px;
81 | }
82 |
83 | .modal-body h2:first-child {margin-top: 0;}
84 | .modal-footer .btn.close {
85 | float: none;
86 | display: inline-block;
87 | }
88 |
89 | .modal-footer {
90 | border-top: 5px solid #e5e5e5;
91 | background-color: transparent;
92 | clear: both;
93 | text-align: left;
94 | padding: 20px 0 10px 0;
95 | margin-top: 20px;
96 | }
97 | .modal-footer form {display: inline-block;}
98 | .modal-footer .btn + .btn {margin-left: 0;}
99 | .modal form {margin-bottom: 0;}
100 |
101 | .boxGray.listDetail {padding: 10px;}
102 |
103 | .listDetail {
104 | font-size: 13px;
105 | font-family: verdana, arial, tahoma, sans-serif;
106 | clear: both;
107 | margin: 0 0 20px;
108 | }
109 |
110 | .listDetail:after {
111 | content: " ";
112 | display: block;
113 | clear: both;
114 | }
115 | .listDetail.boxGray {
116 | background-color: #e2e2e2;
117 | padding: 10px 0;
118 | margin-bottom: 15px;
119 | }
120 |
121 | .listDetail li {
122 | color: #616161;
123 | float: left;
124 | list-style: none;
125 | width: 270px;
126 | padding: 5px 0;
127 | }
128 | .listDetail li.nofloat {float: none;}
129 | .listDetail strong {display: block;}
130 |
131 | .listDetail dt {
132 | width: 150px;
133 | text-align: right;
134 | font-weight: normal;
135 | clear: left;
136 | margin: 0 0 6px;
137 | color: #767676;
138 | display: inline-block;
139 | vertical-align: middle;
140 | }
141 |
142 | .listDetail dd {
143 | display: inline-block;
144 | vertical-align: middle;
145 | margin-left: 5px;
146 | font-weight: bold;
147 | margin-bottom: 6px;
148 | }
149 |
150 | .listDetail .sep {
151 | display: block;
152 | border: none;
153 | background: none;
154 | margin: 0;
155 | padding: 0;
156 | }
157 |
158 | .modal-footer .slidePrev,
159 | .modal-footer .slideNext,
160 | .modalSlider .modal-footer .btn-primary {float:left;}
161 |
162 | .modal-footer .slidePrev:before, .modal-footer .slideNext:after {
163 | content: " ";
164 | display: inline-block;
165 | width: 10px;
166 | height: 10px;
167 | }
168 | .modal-footer .slidePrev:before {background: url(img/arrowLeftGray.png) no-repeat center; margin-right: 5px;}
169 | .modal-footer .slideNext:after {background: url(img/arrowRightGray.png) no-repeat center; margin-left: 5px;}
170 |
171 | .modal-footer .btn {margin: 0 5px;}
172 |
173 | .modal.txtCenter .modal-body,
174 | .modal.txtCenter .modal-footer,
175 | .modal.txtCenter .modal-header,
176 | .modal.txtCenter .modal-header h3,
177 | .modalCenter .modal-body,
178 | .modalCenter .modal-header,
179 | .modalCenter .modal-header h3,
180 | .modalCenter .modal-footer {text-align: center;}
181 |
182 | .modal.modalCenter .btn {margin: 0;}
183 |
184 | /*** Modal Nude
185 | **** Modal sem background, transparentes, sem bordas, sem nada... Totalmente nu!
186 | ***/
187 | .modalNude {
188 | background: none;
189 | box-shadow: none;
190 | border: none;
191 | }
192 |
193 | .modalNude .close {
194 | border-radius: 50%;
195 | background-color: white;
196 | color: #666;
197 | padding: 1px 4px 4px 4px;
198 | opacity: 1;
199 | }
200 |
--------------------------------------------------------------------------------
/app/assets/javascripts/accessibility.js:
--------------------------------------------------------------------------------
1 | $(function(){
2 |
3 | accessMenu();
4 | subMenuAccess();
5 |
6 | // $('select, textarea, h1, h2, h3, h4, h5, h6, p').attr('tabindex','0');
7 | // $('input, select, .pathWay li.active > a, .btn-primary, .alert a').attr('tabindex','2');
8 | // $('.btn-primary').attr('tabindex','3');
9 | // $('.tabs li a').attr('tabindex','4');
10 | //$('#menuPrincipal li > a, #main .shortcutBox h3 a, .headerContent h1, .alert').attr('tabindex','2');
11 | $('#menuPrincipal li > a').attr('tabindex','2');
12 | $('.btn, .tabs a').attr('tabindex','3');
13 | //$('input, select, .btn.btn-primary').attr('tabindex','2');
14 |
15 | //
16 | // WAI-ARIA nos elementos
17 | //
18 |
19 | //
20 | // Menu
21 | $('#menuPrincipal').attr('role','navigation');
22 | $('#menuPrincipal li a').attr('role','menuitem');
23 | $('#menuPrincipal li > a').attr('tabindex','2');
24 |
25 |
26 | //
27 | // Elementos Geral
28 | $('.pathWays').attr('role','navigation');
29 | $('#rodape').attr('role','contentinfo');
30 | $('.alert').attr('role','alert');
31 | $('a.btn, .modal-header .close').attr('role','button');
32 | $('.boxGray').attr('role','region');
33 | $('.boxGray h2').attr('role','presentation');
34 | $('.headerPrincipal').attr('role','banner');
35 | $('.content').attr('role','main'); // criar essa classe nos produtos ??
36 | $('.sidebar').attr('role','complementary');
37 | $('input.required').attr('aria-required','true');
38 | $('.lnkCoverAll').attr('tabindex','3');
39 | //$('.shortcutBox h3 > a').attr('aria-hidden','true');
40 |
41 | $('.lnkCoverAll .btn').attr('tabindex','0');
42 |
43 |
44 | //
45 | // TABS
46 | $('.tabs').attr('role','tablist');
47 |
48 | // Inserie ARIA-SELECTED em TABS ativas
49 | $('.tabs li a').attr({
50 | role: 'tab',
51 | 'aria-selected': 'false',
52 | tabindex : 3
53 | });
54 |
55 | $('.tabs li.active a').attr('aria-selected','true');
56 | $('.tabs li.active a').attr('tabindex','3');
57 |
58 | //collapse
59 | $('.boxCollapse header').each(function(){
60 | var title = $(this).find('h4').text();
61 | var target = $(this).data('target');
62 | $(this).prepend('');
63 | })
64 | $('.collapse').find('[tabindex="3"]').attr('tabindex','0');
65 | $('.collapse.in').find('[tabindex="0"]').attr('tabindex','3');
66 |
67 | //Notificaçao
68 | $('.flash_alert, .onFocus, .modal-header .close').attr('tabindex','-1').focus();
69 |
70 | //Ir para o conteudo
71 | $('.lnkContent').on('click',function(e){
72 | e.preventDefault();
73 | $('.titleContent').attr('tabindex', '-1').focus().css('outline','none');
74 | $('html, body').animate({
75 | scrollTop: $(".titleContent").offset().top
76 | }, 500);
77 | })
78 | $('.accessibility a').focus(function(){
79 | $(this).parent().addClass('show');
80 | }).blur(function(){
81 | $(this).parent().removeClass('show');
82 | })
83 |
84 | // Selecao de servicos no header
85 | $('.dropdown-menu li:last-child a').blur(function(){
86 | $(this).parents('.dropdown-menu').siblings('.dropdown-toggle').click();
87 | $('.serviceName a').focus();
88 | })
89 |
90 | // Insere link sobre as chamadas
91 | // $('.shortcutBox > div').each(function(){
92 | // var title = $(this).find('p').text()
93 | // $(this).append( $(this).find('h3 a').clone().addClass('lnkCoverAll').attr('title',title).attr('aria-label',title).attr('tabindex', '3') );
94 | // })
95 |
96 | // Ativa visualmente as chamadas ao receber o foco do teclado
97 | $('.shortcutBox a').focus(function(){
98 | $(this).parents('div:first').addClass('active');
99 | }).blur(function(){
100 | $('.shortcutBox > div').removeClass('active')
101 | })
102 |
103 | // Ativa visualmente as chamadas ao receber o foco do teclado
104 | $('.lnkCollapse').focus(function(){
105 | $(this).parents('.boxCollapse').addClass('focus');
106 | }).blur(function(){
107 | $(this).parents('.boxCollapse').removeClass('focus');
108 | })
109 |
110 | // Menu com focus
111 | $('#menuPrincipal > ul > li > a').focus(function(){
112 | $(this).parents('li').addClass('selected');
113 | }).blur(function(){
114 | $(this).parents('li').removeClass('selected');
115 | })
116 |
117 | })
118 |
119 | function accessMenu(){
120 | // Menu acessivel, sendo lido apos o link de ir para o conteudo
121 | $('#header .limit').prepend('');
122 | $('[data-access]').each(function(){
123 | var title = $(this).attr('title');
124 | var href = $(this).attr('href');
125 | var text = $(this).text();
126 | $('.menuAccess').append('' + text + '');
127 | })
128 | }
129 |
130 | // Deixa o submenu acessivel
131 | function subMenuAccess(){
132 | $('#menuPrincipal .parent a').focus(function(){
133 | $(this).parents('.parent').addClass('focus');
134 | $(this).parents('.parent').find('ul').attr({
135 | 'aria-expanded' : true,
136 | 'aria-hidden': false
137 | })
138 | }).blur(function(){
139 | $(this).parents('.parent').removeClass('focus');
140 | $(this).parents('.parent').find('ul').attr({
141 | 'aria-expanded' : false,
142 | 'aria-hidden': true
143 | })
144 | })
145 | }
146 |
--------------------------------------------------------------------------------
/app/views/manual/instrucoes-iniciais.html:
--------------------------------------------------------------------------------
1 | Informações iniciais
2 |O Locaweb Style são os padrões de interface utilizados nos produtos da Locaweb. Ele explora um simples e flexível HTML, CSS e Javascript para as necessidades comuns na manutenção e criação dos nossos serviços.
3 | 4 |5 | Este projeto foi criado para manter uniforme a identidade de todas as interfaces dos produtos da Locaweb. Outro objetivo importante para tal iniciativa é a uniformização do código da Locaweb, melhorando a perfomance de produção, facilitando o aprendizado de novos integrantes e agilizando a implementação de novas ideias. 6 |
7 | 8 |9 | Com essa estrutura, a Locaweb integra de forma consistente as necessidades de interface e programação, trabalhando em um código client-side robusto e escalável. Assim mantemos a fidelidade do layout sob um código limpo e enxuto, que se adequa às necessidades dos programadores. 10 |
11 | 12 |Por mera liberalidade e de forma gratuita, a LOCAWEB divulga o Locaweb Style por meio do “site” www.locaweb.style.com.br (CONFIRMAR), para uso por qualquer pessoa que tenha conhecimento técnico para tanto (usuário), mediante a simples adesão ao termo anexo. 13 |
14 |A responsabilidade pela utilização do Locaweb Style é exclusiva do usuário. O usuário desde já isenta a Locaweb da responsabilidade por qualquer ato ou fato decorrente desta utilização.
15 | 16 |Caso você tenha alguma sugestão para melhorar a inteligência destes códigos, entre em contato conosco. Novas idéias são sempre bem vindas.
17 | 18 | 19 |20 | 21 |
O que o Locaweb Style utiliza?
22 | 23 |24 | O Locaweb Style utiliza alguns plugins já conhecidos de todos os devs e que não precisam ser inseridos novamente no projeto, a saber: 25 |
26 | 27 |Bootstrap
28 |Os estilos e comportamentos foram baseados no Bootstrap, framework criado pelo Mark Ott e Jacob Thornton para agilizar a criação de interface do Twitter.
29 | 30 |Se você não conhece, visite o github do projeto e conheça já!
31 | 32 |33 | Curiosidade – 34 | O Bootstrap utiliza o Normalize, que é um CSS Reset bastante completo. Ele padroniza e compatibiliza alguns problemas de textos e valores padrões em elementos do HTML. O Normalize foi criado pelo Nicolas Gallagher and Jonathan Neal. 35 | Dê uma olhada no projeto 36 |
37 | 38 |JQuery
39 |O JQuery é o framework mais utilizado para controle e manipulação de comportamentos de elementos do HTML. Acho que ele dispensa apresentações. Link do projeto
40 | 41 |Modernizr
42 |A Modernizr é um script de detecção de compatibilidade e suporte dos browsers ao CSS3 e algumas features do HTML5. Ele avisa se o browser suporta ou não as novidades do W3C, possibilitando a criação de fallbacks para browsers incompatíveis. Assim fica fácil saber quais browsers suportam ou não SVG, canvas, RGBA, drop shadow, gradiente e tudo o mais.
43 | 44 |Ele foi criado por desenvolvedores renomados como Paul Irish e Faruk Ates. Site do projeto
45 | 46 |Select2
47 |Select2 é um plugin para customização de selects (ou como muitos chamam "combo box") muito útil e flexível. Ele é o melhor plugin para executar essa tarefa por que ele mantém a acessibilidade. Você consegue navegar via teclado e etc. Para ver como o Locaweb Style utiliza, visite esse link.
48 | 49 |Masked Input
50 |Masked Input é um plugin para a criação de máscaras para formulários. É muito simples de utilizar. Para ver seu funcionamento, clique aqui.
51 | 52 |Se der pau, falo com quem?
53 |Se precisar de algum plugin ou um novo adendo às funcionalidades, bem como se tiver qualquer dúvida, fale conosco que tentaremos attender a sua solicitação, por liberalidade e independentemente da assunção de qualquer responsabilidade.
54 |
55 | Antes de pular da janela, tente falar com o Diego Eis que é o Coordenador Front-end.
56 | O Ítalo Oliveira é o designer responsável.
57 | O Márcio Trindade do SAAS, também pode ajudar bastante caso der algo errado. Foi ele montou o esquema de instalação mother fucker para integrar o Locaweb Style.
58 |
Mas eu quero ajudar a aumentar a inteligência dessa coisa toda
61 |Mas que coisa linda! Seja bem-vindo. Nos procure e compartilhe suas ideias. Se elas forem realmente ajudar o projeto como um todo, podendo ser implementado para todos os serviços da Locaweb, ela será muito bem vinda.
62 | 63 | -------------------------------------------------------------------------------- /app/views/manual/campos.html: -------------------------------------------------------------------------------- 1 |Formulários
2 | <%= content_for_clippy do %> 3 | 4 |
5 |
22 |
23 |
6 | Criar nova lista
7 |
20 |
21 | 24 | <div class="simpleFilter sideBySide formInline"> 25 | <a href="#" class="btn btn-primary ico-plus fLeft">Criar nova lista</a> 26 | <form class="fRight"> 27 | <div class="control-group"> 28 | <label>Buscar</label> 29 | <input type="text" placeholder="Buscar pelo nome"> 30 | <input type="submit" value="Buscar" class="btn"> 31 | </div> 32 | </form> 33 | </div> 34 |35 |
| Classes usadas | 39 |Descrição | 40 |
|---|---|
| simpleFilter | 45 |Prepara uma barra com campos, botoes e ações. | 46 |
| sideBySide | 49 |Faz elementos control-group ficarem lado a lado. | 50 |
| formInline | 53 |Faz labels dos inputs ficarem ao lado dos campos de formulário. | 54 |
| control-group | 57 |Classe padrão do Bootstrap. Agrupa elemento de formulários: labels, campos, botões. | 58 |
63 |
72 |
64 | @
65 |
66 |
67 |
68 |
69 | .00
70 |
71 | 73 | <div class="input-prepend"> 74 | <span class="add-on">@</span> 75 | <input class="span2" id="prependedInput" type="text" placeholder="Username"> 76 | </div> 77 | <div class="input-append"> 78 | <input class="span2" id="appendedInput" type="text"> 79 | <span class="add-on">.00</span> 80 | </div> 81 |82 |
Insere uma classe .add-on no elemento, formatando-o de forma que ele fique acomplado ao campo.
83 | 84 | 85 |
86 |
105 |
87 |
88 |
104 |
89 |
92 |
95 |
103 |
96 |
102 |
97 |
98 |
99 |
100 |
101 | 106 | <div class="control-group"> 107 | <label>Tipo de autenticação:</label> 108 | <div class="controls"> 109 | <label class="control-label"> 110 | <input type="radio" data-target="#authOpt" data-toggle="show" checked="checked"> Autenticado 111 | </label> 112 | <label class="control-label"> 113 | <input type="radio" data-target="#authOpt" data-toggle="hide"> Não autenticado 114 | </label> 115 | <div id="authOpt" class="collapse"> 116 | <div class="boxGrayOpt formInline"> 117 | <label><input type="checkbox" value="1"> CPF</label> 118 | <label><input type="checkbox" value="1"> Endereço</label> 119 | <label><input type="checkbox" value="1"> CEP</label> 120 | </div> 121 | </div> 122 | </div> 123 | </div> 124 |125 | 126 | <% end %> 127 | 128 |
129 | <%= clippy(yield(:code)) %>
130 |
131 |
--------------------------------------------------------------------------------
/app/views/manual/grid.html:
--------------------------------------------------------------------------------
1 | Estruturação e Grid
2 |O layout é baseado em um grid criado por nós por isso temos alguma flexibilidade para a criação das estruturas utilizadas nos serviços.
3 |Em telas com uma coluna, onde normalmente não usamos uma sidebar, o conteúdo tem a largura total do espaço, é necessário inserir uma classe para que o grid funcione perfeitamente.
4 |Que problema isso resolve?
5 |Nós precisamos gerenciar diversas estruturas, tanto estruturas de layout quanto as estruturas internas dos layouts. Ter um layout baseado por grids ajuda a manter a padronização e uniformização de todos os serviços.
6 |Abaixo segue um exemplo com as grids e suas respectivas classes.
7 |O grid sempre deve ter uma estrutura de hierarquia correta de elementos. Um elemento com a classe .row deve envolver os elementos que dividirão a estrutura, que terão classes como .span2, span3, .span4 até span16.
8 |9 | 10 |
11 | <%= content_for_clippy do %>
12 |
13 |
142 |
14 |
15 |
48 |
49 |
140 | <% end %>
141 |
16 | Sugestões
17 |
39 |
40 | Nome do projeto
18 |
19 | Acessando com Identificador
20 |
38 |
21 | 28424
22 |
35 |
36 | Nome da conta: Gateway 01
37 | -
42 |
- Página inicial 43 |
- Transações 44 |
- Meios de pagamento 45 |
50 |
116 |
117 |
139 |
51 |
115 |
52 |
114 |
53 |
55 |
56 | span16
54 |
57 |
59 | span1
58 |
60 |
62 |
63 | span15
61 |
64 |
66 | span2
65 |
67 |
69 |
70 | span14
68 |
71 |
73 | span3
72 |
74 |
76 |
77 | span13
75 |
78 |
80 | span4
79 |
81 |
83 |
84 |
85 | span12
82 |
86 |
88 | span5
87 |
89 |
91 |
92 | span11
90 |
93 |
95 | span6
94 |
96 |
98 |
99 | span10
97 |
100 |
102 | span7
101 |
103 |
105 |
106 | span9
104 |
107 |
109 | span8
108 |
110 |
112 |
113 | span8
111 |
143 | <%= clippy(yield(:code)) %>
144 |
145 |
--------------------------------------------------------------------------------
/app/views/layouts/application.html.erb:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
15 |
113 |
114 |
115 |
129 |
130 |
131 |
--------------------------------------------------------------------------------
16 |
19 |
20 | Locaweb
17 |Locaweb Style - Padrões de código e UI
18 |Selecione o tema: <%= select_tag "themes", options_for_select(theme_options), id: "theme_selector", include_blank: true %>
21 |
104 |
105 |
106 | <%= yield %>
107 |
108 |
112 |