phrasing 2.1.3 → 3.0.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,10 +1,12 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- phrasing (0.9.1)
5
- bootstrap-editable-rails
4
+ phrasing (3.0.0)
6
5
  haml-rails
6
+ jquery-cookie-rails
7
+ jquery-rails
7
8
  rails (>= 3.1.0)
9
+ railties (>= 3.1)
8
10
 
9
11
  GEM
10
12
  remote: https://rubygems.org/
@@ -33,10 +35,8 @@ GEM
33
35
  multi_json (~> 1.3)
34
36
  thread_safe (~> 0.1)
35
37
  tzinfo (~> 0.3.37)
36
- arel (4.0.0)
38
+ arel (4.0.1)
37
39
  atomic (1.1.13)
38
- bootstrap-editable-rails (0.0.5)
39
- railties (>= 3.1)
40
40
  builder (3.1.4)
41
41
  capybara (2.0.3)
42
42
  mime-types (>= 1.16)
@@ -64,6 +64,11 @@ GEM
64
64
  railties (>= 3.1, < 4.1)
65
65
  hike (1.2.3)
66
66
  i18n (0.6.5)
67
+ jquery-cookie-rails (1.3.1.1)
68
+ railties (>= 3.2.0, < 5.0)
69
+ jquery-rails (3.0.4)
70
+ railties (>= 3.0, < 5.0)
71
+ thor (>= 0.14, < 2.0)
67
72
  mail (2.5.4)
68
73
  mime-types (~> 1.16)
69
74
  treetop (~> 1.4.8)
@@ -113,7 +118,7 @@ GEM
113
118
  multi_json (~> 1.0)
114
119
  rack (~> 1.0)
115
120
  tilt (~> 1.1, != 1.3.0)
116
- sprockets-rails (2.0.0)
121
+ sprockets-rails (2.0.1)
117
122
  actionpack (>= 3.0)
118
123
  activesupport (>= 3.0)
119
124
  sprockets (~> 2.8)
data/README.md CHANGED
@@ -62,11 +62,11 @@ Start with adding your phrases simply by writting in your view file:
62
62
 
63
63
  = phrase('my-first-phrase')
64
64
 
65
- Apart from editing phrases (basically, Rails translations) you can also inline edit your models attributes, just use the `model_phrase` method:
65
+ Apart from editing phrases (basically, Rails translations) you can also inline edit your models attributes, just use the same `phrase` method, with the first attribute being the record and the second one the records attribute:
66
66
 
67
- = model_phrase(@post, :title)
67
+ = phrase(@post, :title)
68
68
 
69
- Where <tt>@post</tt> is a object with a <tt>title</tt> attribute.
69
+ In the above example, <tt>@post</tt> is the record with a <tt>title</tt> attribute.
70
70
 
71
71
  ## Security
72
72
 
@@ -86,6 +86,31 @@ or you can whitelist all of them (not recommended) with:
86
86
  Phrasing.allow_update_on_all_models_and_attributes = true
87
87
  ```
88
88
 
89
+ ## Upgrading from version 2.x to 3.x
90
+
91
+ In versions 3.0.0 and above we have added the Phrasing Versioning System which requires an additional table, so if you are upgrading to a 3.x release, run <tt>rake phrasing:install</tt> to get the additional migration file, <tt>rake db:migrate</tt> and thats it.
92
+
93
+ ## Turbolinks
94
+
95
+ If you're experiencing problems with Rails apps using Turbolinks, include the [jQuery-turbolinks](https://github.com/kossnocorp/jquery.turbolinks) gem in your application and simply require it in the following order:
96
+
97
+ ```javascript
98
+ //= require jquery
99
+ //= require jquery.turbolinks
100
+ //= require phrasing
101
+ //= require turbolinks
102
+ ```
103
+
104
+ ## Phrasing Appearance
105
+
106
+ The `phrase` view helper can take the `options` hash as the last parameter. Features:
107
+ ```ruby
108
+ url: custom_url # point Phrasing to other actions in other controllers
109
+ inverse: true # change the hovered background and underline colors to better fit darker backgrounds
110
+ class: custom_class # add custom CSS classes to your phrases to change the appearance of phrases in your application
111
+ interpolation: { %min: 10 } # add variables to your translations just like w/ I18n
112
+ ```
113
+
89
114
  ## Authors
90
115
 
91
116
  Copyright (c) 2013, Infinum
@@ -190,7 +190,7 @@ var editor = (function() {
190
190
  element = element.parentNode;
191
191
 
192
192
  if ( element.nodeName === 'A' ) {
193
- nodeNames.url = element.href;
193
+ nodeNames.url = element.getAttribute("href");
194
194
  }
195
195
  }
196
196
 
@@ -293,15 +293,7 @@ var editor = (function() {
293
293
 
294
294
  // Unlink any current links
295
295
  document.execCommand( 'unlink', false );
296
-
297
296
  if (url !== "") {
298
-
299
- // Insert HTTP if it doesn't exist.
300
- if ( !url.match("^(http|https)://") ) {
301
-
302
- url = "http://" + url;
303
- }
304
-
305
297
  document.execCommand( 'createLink', false, url );
306
298
  }
307
299
  }
@@ -1,5 +1,9 @@
1
1
  //= require head
2
2
  //= require spin
3
+ //= require jquery
4
+ //= require jquery_ujs
5
+ //= require jquery.cookie
6
+
3
7
  var phrasing_setup = function(){
4
8
 
5
9
  /// INITIALIZE THE BUBBLE
@@ -142,7 +146,7 @@ var phrasing_setup = function(){
142
146
  }
143
147
 
144
148
  // Information icon for the edit mode bubble
145
- $('#phrasing-info-icon-container, #phrasing-info-container').off().on('click',function(){
149
+ $('#phrasing-info-icon-container, #phrasing-info-container').on('click',function(){
146
150
  if($('#phrasing-info-container').is(':visible')){
147
151
  $('#phrasing-edit-mode-bubble').animate({height: 180}, 200, function(){
148
152
  $('#phrasing-info-container').hide()
@@ -155,4 +159,4 @@ var phrasing_setup = function(){
155
159
  };
156
160
 
157
161
  $(document).ready(phrasing_setup)
158
- $(document).on('page:load', phrasing_setup)
162
+ // $(document).on('page:load', phrasing_setup)
@@ -0,0 +1,2 @@
1
+ //= require jquery
2
+ //= require jquery_ujs
@@ -11,6 +11,11 @@
11
11
  .phrasable_on{
12
12
  border-bottom: 1px dashed black;
13
13
 
14
+ a{
15
+ pointer-events: none;
16
+ cursor: default;
17
+ }
18
+
14
19
  &:focus{
15
20
  outline: none;
16
21
  }
@@ -7,7 +7,7 @@
7
7
  height:180px;
8
8
  bottom:10px;
9
9
  right:10px;
10
- z-index: 1000;
10
+ z-index: 9999;
11
11
  font-family: Arial, Helvetica, sans-serif;
12
12
  font-size:14px;
13
13
 
@@ -10,335 +10,330 @@
10
10
 
11
11
  /* Table of Content
12
12
  ==================================================
13
- #Reset & Basics
14
- #Basic Styles
15
- #Site Styles
16
- #Typography
17
- #Links
18
- #Lists
19
- #Images
20
- #Buttons
21
- #Tabs
22
- #Forms
23
- #Misc */
13
+ #Reset & Basics
14
+ #Basic Styles
15
+ #Site Styles
16
+ #Typography
17
+ #Links
18
+ #Lists
19
+ #Images
20
+ #Buttons
21
+ #Tabs
22
+ #Forms
23
+ #Misc */
24
24
 
25
25
 
26
26
  /* #Reset & Basics (Inspired by E. Meyers)
27
27
  ================================================== */
28
- html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
29
- margin: 0;
30
- padding: 0;
31
- border: 0;
32
- font-size: 100%;
33
- font: inherit;
34
- vertical-align: baseline; }
35
- article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
36
- display: block; }
37
- body {
38
- line-height: 1; }
39
- ol, ul {
40
- list-style: none; }
41
- blockquote, q {
42
- quotes: none; }
43
- blockquote:before, blockquote:after,
44
- q:before, q:after {
45
- content: '';
46
- content: none; }
47
- table {
48
- border-collapse: collapse;
49
- border-spacing: 0; }
28
+ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
29
+ margin: 0;
30
+ padding: 0;
31
+ border: 0;
32
+ font-size: 100%;
33
+ font: inherit; }
34
+ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
35
+ display: block; }
36
+ body {
37
+ line-height: 1; }
38
+ ol, ul {
39
+ list-style: none; }
40
+ blockquote, q {
41
+ quotes: none; }
42
+ blockquote:before, blockquote:after,
43
+ q:before, q:after {
44
+ content: '';
45
+ content: none; }
46
+ table {
47
+ border-collapse: collapse;
48
+ border-spacing: 0; }
50
49
 
51
50
 
52
51
  /* #Basic Styles
53
52
  ================================================== */
54
- body {
55
- background: #fff;
56
- font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
57
- color: #444;
58
- -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
59
- -webkit-text-size-adjust: 100%;
53
+ body {
54
+ background: #fff;
55
+ font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
56
+ color: #444;
57
+ -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
58
+ -webkit-text-size-adjust: 100%;
60
59
  }
61
60
 
62
61
 
63
62
  /* #Typography
64
63
  ================================================== */
65
- h1, h2, h3, h4, h5, h6 {
66
- color: #181818;
67
- font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif;
68
- font-weight: normal; }
69
- h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
70
- h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;}
71
- h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
72
- h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
73
- h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
74
- h5 { font-size: 17px; line-height: 24px; }
75
- h6 { font-size: 14px; line-height: 21px; }
76
- .subheader { color: #777; }
77
-
78
- p { margin: 0 0 20px 0; }
79
- p img { margin: 0; }
80
- p.lead { font-size: 21px; line-height: 27px; color: #777; }
81
-
82
- em { font-style: italic; }
83
- strong { font-weight: bold; color: #333; }
84
- small { font-size: 80%; }
85
-
86
- /* Blockquotes */
87
- blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; }
88
- blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
89
- blockquote cite { display: block; font-size: 12px; color: #555; }
90
- blockquote cite:before { content: "\2014 \0020"; }
91
- blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }
92
-
93
- hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }
64
+ h1, h2, h3, h4, h5, h6 {
65
+ color: #181818;
66
+ font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif;
67
+ font-weight: normal; }
68
+ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
69
+ h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;}
70
+ h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
71
+ h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
72
+ h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
73
+ h5 { font-size: 17px; line-height: 24px; }
74
+ h6 { font-size: 14px; line-height: 21px; }
75
+ .subheader { color: #777; }
76
+
77
+ p { margin: 0 0 20px 0; }
78
+ p img { margin: 0; }
79
+ p.lead { font-size: 21px; line-height: 27px; color: #777; }
80
+
81
+ em { font-style: italic; }
82
+ strong { font-weight: bold; color: #333; }
83
+ small { font-size: 80%; }
84
+
85
+ /* Blockquotes */
86
+ blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; }
87
+ blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
88
+ blockquote cite { display: block; font-size: 12px; color: #555; }
89
+ blockquote cite:before { content: "\2014 \0020"; }
90
+ blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }
91
+
92
+ hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }
94
93
 
95
94
 
96
95
  /* #Links
97
96
  ================================================== */
98
- a, a:visited { color: #333; text-decoration: underline; outline: 0; }
99
- a:hover, a:focus { color: #000; }
100
- p a, p a:visited { line-height: inherit; }
97
+ a, a:visited { color: #333; text-decoration: none; outline: 0; }
98
+ a:hover, a:focus { color: #000; }
99
+ p a, p a:visited { line-height: inherit; }
101
100
 
102
101
 
103
102
  /* #Lists
104
103
  ================================================== */
105
- ul, ol { margin-bottom: 20px; }
106
- ul { list-style: none outside; }
107
- ol { list-style: decimal; }
108
- ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
109
- ul.square { list-style: square outside; }
110
- ul.circle { list-style: circle outside; }
111
- ul.disc { list-style: disc outside; }
112
- ul ul, ul ol,
113
- ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; }
114
- ul ul li, ul ol li,
115
- ol ol li, ol ul li { margin-bottom: 6px; }
116
- li { line-height: 18px; margin-bottom: 12px; }
117
- ul.large li { line-height: 21px; }
118
- li p { line-height: 21px; }
104
+ ul, ol { margin-bottom: 20px; }
105
+ ul { list-style: none outside; }
106
+ ol { list-style: decimal; }
107
+ ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
108
+ ul.square { list-style: square outside; }
109
+ ul.circle { list-style: circle outside; }
110
+ ul.disc { list-style: disc outside; }
111
+ ul ul, ul ol,
112
+ ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; }
113
+ ul ul li, ul ol li,
114
+ ol ol li, ol ul li { margin-bottom: 6px; }
115
+ li { line-height: 18px; margin-bottom: 12px; }
116
+ ul.large li { line-height: 21px; }
117
+ li p { line-height: 21px; }
119
118
 
120
119
  /* #Images
121
120
  ================================================== */
122
121
 
123
- img.scale-with-grid {
124
- max-width: 100%;
125
- height: auto; }
122
+ img.scale-with-grid {
123
+ max-width: 100%;
124
+ height: auto; }
126
125
 
127
126
 
128
127
  /* #Buttons
129
128
  ================================================== */
130
129
 
131
- .button,
132
- button,
133
- input[type="submit"],
134
- input[type="reset"],
135
- input[type="button"] {
136
- background: #eee; /* Old browsers */
137
- background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */
138
- background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
139
- background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */
140
- background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */
141
- background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */
142
- background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */
143
- border: 1px solid #aaa;
144
- border-top: 1px solid #ccc;
145
- border-left: 1px solid #ccc;
146
- padding: 4px 12px;
147
- -moz-border-radius: 3px;
148
- -webkit-border-radius: 3px;
149
- border-radius: 3px;
150
- color: #444;
151
- display: inline-block;
152
- font-size: 11px;
153
- font-weight: bold;
154
- text-decoration: none;
155
- text-shadow: 0 1px rgba(255, 255, 255, .75);
156
- cursor: pointer;
157
- margin-bottom: 20px;
158
- line-height: normal;
159
- padding: 8px 10px;
160
- font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
161
-
162
- .button:hover,
163
- button:hover,
164
- input[type="submit"]:hover,
165
- input[type="reset"]:hover,
166
- input[type="button"]:hover {
167
- color: #222;
168
- background: #ddd; /* Old browsers */
169
- background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */
170
- background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */
171
- background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */
172
- background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */
173
- background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */
174
- background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */
175
- border: 1px solid #888;
176
- border-top: 1px solid #aaa;
177
- border-left: 1px solid #aaa; }
178
-
179
- .button:active,
180
- button:active,
181
- input[type="submit"]:active,
182
- input[type="reset"]:active,
183
- input[type="button"]:active {
184
- border: 1px solid #666;
185
- background: #ccc; /* Old browsers */
186
- background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */
187
- background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */
188
- background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */
189
- background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */
190
- background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */
191
- background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ }
192
-
193
- .button.full-width,
194
- button.full-width,
195
- input[type="submit"].full-width,
196
- input[type="reset"].full-width,
197
- input[type="button"].full-width {
198
- width: 100%;
199
- padding-left: 0 !important;
200
- padding-right: 0 !important;
201
- text-align: center; }
202
-
203
- /* Fix for odd Mozilla border & padding issues */
204
- button::-moz-focus-inner,
205
- input::-moz-focus-inner {
130
+ .button,
131
+ button,
132
+ input[type="reset"],
133
+ input[type="button"] {
134
+ background: #eee; /* Old browsers */
135
+ background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */
136
+ background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
137
+ background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */
138
+ background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */
139
+ background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */
140
+ background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */
141
+ border: 1px solid #aaa;
142
+ border-top: 1px solid #ccc;
143
+ border-left: 1px solid #ccc;
144
+ padding: 4px 12px;
145
+ -moz-border-radius: 3px;
146
+ -webkit-border-radius: 3px;
147
+ border-radius: 3px;
148
+ color: #444;
149
+ display: inline-block;
150
+ font-size: 11px;
151
+ font-weight: bold;
152
+ text-decoration: none;
153
+ text-shadow: 0 1px rgba(255, 255, 255, .75);
154
+ cursor: pointer;
155
+ margin-bottom: 20px;
156
+ line-height: normal;
157
+ padding: 8px 10px;
158
+ font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
159
+
160
+ .button:hover,
161
+ button:hover,
162
+ input[type="reset"]:hover,
163
+ input[type="button"]:hover {
164
+ color: #222;
165
+ background: #ddd; /* Old browsers */
166
+ background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */
167
+ background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */
168
+ background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */
169
+ background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */
170
+ background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */
171
+ background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */
172
+ border: 1px solid #888;
173
+ border-top: 1px solid #aaa;
174
+ border-left: 1px solid #aaa; }
175
+
176
+ .button:active,
177
+ button:active,
178
+ input[type="reset"]:active,
179
+ input[type="button"]:active {
180
+ border: 1px solid #666;
181
+ background: #ccc; /* Old browsers */
182
+ background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */
183
+ background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */
184
+ background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */
185
+ background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */
186
+ background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */
187
+ background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ }
188
+
189
+ .button.full-width,
190
+ button.full-width,
191
+ input[type="reset"].full-width,
192
+ input[type="button"].full-width {
193
+ width: 100%;
194
+ padding-left: 0 !important;
195
+ padding-right: 0 !important;
196
+ text-align: center; }
197
+
198
+ /* Fix for odd Mozilla border & padding issues */
199
+ button::-moz-focus-inner,
200
+ input::-moz-focus-inner {
206
201
  border: 0;
207
202
  padding: 0;
208
- }
203
+ }
209
204
 
210
205
 
211
206
  /* #Tabs (activate in tabs.js)
212
207
  ================================================== */
213
- ul.tabs {
214
- display: block;
215
- margin: 0 0 20px 0;
216
- padding: 0;
217
- border-bottom: solid 1px #ddd; }
218
- ul.tabs li {
219
- display: block;
220
- width: auto;
221
- height: 30px;
222
- padding: 0;
223
- float: left;
224
- margin-bottom: 0; }
225
- ul.tabs li a {
226
- display: block;
227
- text-decoration: none;
228
- width: auto;
229
- height: 29px;
230
- padding: 0px 20px;
231
- line-height: 30px;
232
- border: solid 1px #ddd;
233
- border-width: 1px 1px 0 0;
234
- margin: 0;
235
- background: #f5f5f5;
236
- font-size: 13px; }
237
- ul.tabs li a.active {
238
- background: #fff;
239
- height: 30px;
240
- position: relative;
241
- top: -4px;
242
- padding-top: 4px;
243
- border-left-width: 1px;
244
- margin: 0 0 0 -1px;
245
- color: #111;
246
- -moz-border-radius-topleft: 2px;
247
- -webkit-border-top-left-radius: 2px;
248
- border-top-left-radius: 2px;
249
- -moz-border-radius-topright: 2px;
250
- -webkit-border-top-right-radius: 2px;
251
- border-top-right-radius: 2px; }
252
- ul.tabs li:first-child a.active {
253
- margin-left: 0; }
254
- ul.tabs li:first-child a {
255
- border-width: 1px 1px 0 1px;
256
- -moz-border-radius-topleft: 2px;
257
- -webkit-border-top-left-radius: 2px;
258
- border-top-left-radius: 2px; }
259
- ul.tabs li:last-child a {
260
- -moz-border-radius-topright: 2px;
261
- -webkit-border-top-right-radius: 2px;
262
- border-top-right-radius: 2px; }
263
-
264
- ul.tabs-content { margin: 0; display: block; }
265
- ul.tabs-content > li { display:none; }
266
- ul.tabs-content > li.active { display: block; }
267
-
268
- /* Clearfixing tabs for beautiful stacking */
269
- ul.tabs:before,
270
- ul.tabs:after {
271
- content: '\0020';
272
- display: block;
273
- overflow: hidden;
274
- visibility: hidden;
275
- width: 0;
276
- height: 0; }
277
- ul.tabs:after {
278
- clear: both; }
279
- ul.tabs {
280
- zoom: 1; }
208
+ ul.tabs {
209
+ display: block;
210
+ margin: 0 0 20px 0;
211
+ padding: 0;
212
+ border-bottom: solid 1px #ddd; }
213
+ ul.tabs li {
214
+ display: block;
215
+ width: auto;
216
+ height: 30px;
217
+ padding: 0;
218
+ float: left;
219
+ margin-bottom: 0; }
220
+ ul.tabs li a {
221
+ display: block;
222
+ text-decoration: none;
223
+ width: auto;
224
+ height: 29px;
225
+ padding: 0px 20px;
226
+ line-height: 30px;
227
+ border: solid 1px #ddd;
228
+ border-width: 1px 1px 0 0;
229
+ margin: 0;
230
+ background: #f5f5f5;
231
+ font-size: 13px; }
232
+ ul.tabs li a.active {
233
+ background: #fff;
234
+ height: 30px;
235
+ position: relative;
236
+ top: -4px;
237
+ padding-top: 4px;
238
+ border-left-width: 1px;
239
+ margin: 0 0 0 -1px;
240
+ color: #111;
241
+ -moz-border-radius-topleft: 2px;
242
+ -webkit-border-top-left-radius: 2px;
243
+ border-top-left-radius: 2px;
244
+ -moz-border-radius-topright: 2px;
245
+ -webkit-border-top-right-radius: 2px;
246
+ border-top-right-radius: 2px; }
247
+ ul.tabs li:first-child a.active {
248
+ margin-left: 0; }
249
+ ul.tabs li:first-child a {
250
+ border-width: 1px 1px 0 1px;
251
+ -moz-border-radius-topleft: 2px;
252
+ -webkit-border-top-left-radius: 2px;
253
+ border-top-left-radius: 2px; }
254
+ ul.tabs li:last-child a {
255
+ -moz-border-radius-topright: 2px;
256
+ -webkit-border-top-right-radius: 2px;
257
+ border-top-right-radius: 2px; }
258
+
259
+ ul.tabs-content { margin: 0; display: block; }
260
+ ul.tabs-content > li { display:none; }
261
+ ul.tabs-content > li.active { display: block; }
262
+
263
+ /* Clearfixing tabs for beautiful stacking */
264
+ ul.tabs:before,
265
+ ul.tabs:after {
266
+ content: '\0020';
267
+ display: block;
268
+ overflow: hidden;
269
+ visibility: hidden;
270
+ width: 0;
271
+ height: 0; }
272
+ ul.tabs:after {
273
+ clear: both; }
274
+ ul.tabs {
275
+ zoom: 1; }
281
276
 
282
277
 
283
278
  /* #Forms
284
279
  ================================================== */
285
280
 
286
- form {
287
- margin-bottom: 20px; }
288
- fieldset {
289
- margin-bottom: 20px; }
290
- input[type="text"],
291
- input[type="password"],
292
- input[type="email"],
293
- textarea,
294
- select {
295
- border: 1px solid #ccc;
296
- padding: 6px 4px;
297
- outline: none;
298
- -moz-border-radius: 2px;
299
- -webkit-border-radius: 2px;
300
- border-radius: 2px;
301
- font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
302
- color: #777;
303
- margin: 0;
304
- width: 210px;
305
- max-width: 100%;
306
- display: block;
307
- margin-bottom: 20px;
308
- background: #fff; }
309
- select {
310
- padding: 0; }
311
- input[type="text"]:focus,
312
- input[type="password"]:focus,
313
- input[type="email"]:focus,
314
- textarea:focus {
315
- border: 1px solid #aaa;
316
- color: #444;
317
- -moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
318
- -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
319
- box-shadow: 0 0 3px rgba(0,0,0,.2); }
320
- textarea {
321
- min-height: 60px; }
322
- label,
323
- legend {
324
- display: block;
325
- font-weight: bold;
326
- font-size: 13px; }
327
- select {
328
- width: 220px; }
329
- input[type="checkbox"] {
330
- display: inline; }
331
- label span,
332
- legend span {
333
- font-weight: normal;
334
- font-size: 13px;
335
- color: #444; }
281
+ form {
282
+ margin-bottom: 20px; }
283
+ fieldset {
284
+ margin-bottom: 20px; }
285
+ input[type="text"],
286
+ input[type="password"],
287
+ input[type="email"],
288
+ textarea,
289
+ select {
290
+ border: 1px solid #ccc;
291
+ padding: 6px 4px;
292
+ outline: none;
293
+ -moz-border-radius: 2px;
294
+ -webkit-border-radius: 2px;
295
+ border-radius: 2px;
296
+ font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
297
+ color: #777;
298
+ margin: 0;
299
+ width: 210px;
300
+ max-width: 100%;
301
+ display: block;
302
+ margin-bottom: 20px;
303
+ background: #fff; }
304
+ select {
305
+ padding: 0; }
306
+ input[type="text"]:focus,
307
+ input[type="password"]:focus,
308
+ input[type="email"]:focus,
309
+ textarea:focus {
310
+ border: 1px solid #aaa;
311
+ color: #444;
312
+ -moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
313
+ -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
314
+ box-shadow: 0 0 3px rgba(0,0,0,.2); }
315
+ textarea {
316
+ min-height: 60px; }
317
+ label,
318
+ legend {
319
+ display: block;
320
+ font-weight: bold;
321
+ font-size: 13px; }
322
+ select {
323
+ width: 220px; }
324
+ input[type="checkbox"] {
325
+ display: inline; }
326
+ label span,
327
+ legend span {
328
+ font-weight: normal;
329
+ font-size: 13px;
330
+ color: #444; }
336
331
 
337
332
  /* #Misc
338
333
  ================================================== */
339
- .remove-bottom { margin-bottom: 0 !important; }
340
- .half-bottom { margin-bottom: 10px !important; }
341
- .add-bottom { margin-bottom: 20px !important; }
334
+ .remove-bottom { margin-bottom: 0 !important; }
335
+ .half-bottom { margin-bottom: 10px !important; }
336
+ .add-bottom { margin-bottom: 20px !important; }
342
337
 
343
338
  /* end of getskeleton */
344
339
 
@@ -353,6 +348,14 @@ table {
353
348
  padding-bottom: 1em;
354
349
  }
355
350
 
351
+ table.all-phrases tbody tr:hover{
352
+ background-color: grey;
353
+ color:white;
354
+ cursor: pointer;
355
+ }
356
+ table.all-phrases tbody tr:hover a{
357
+ color:white;
358
+ }
356
359
  table th {
357
360
  text-align: left;
358
361
  padding-bottom: 1em;
@@ -365,12 +368,15 @@ table tr td {
365
368
  }
366
369
 
367
370
  table tr td.key {
371
+ padding-left: 10px;
372
+ padding-right: 20px;
368
373
  width: 20%;
369
374
  margin-right: 5%;
370
375
  vertical-align: top;
371
376
  }
372
377
 
373
378
  table tr td.value {
379
+ padding-right: 10px;
374
380
  width: 75%;
375
381
  }
376
382
 
@@ -418,11 +424,10 @@ div.edit form.button_to {
418
424
  }
419
425
 
420
426
  body {
421
- background-color: #FFFDF9;
427
+ background-color: white;
422
428
  }
423
429
 
424
430
  #page {
425
- background-color: #FFFDF7;
426
431
  width: 800px;
427
432
  margin: 0 auto;
428
433
  padding: 2em;
@@ -434,28 +439,47 @@ body {
434
439
  }
435
440
 
436
441
  #header h1 {
437
- margin-left: 1em;
442
+ font-weight: bold;
438
443
  float: left;
439
444
  font-size: 2.5em;
440
445
  line-height: 1em;
441
446
  }
442
447
 
448
+ #header a{
449
+ text-decoration: none;
450
+ font-weight: bold;
451
+ }
452
+
443
453
  #header ul {
444
454
  float: right;
445
455
  list-style-type: none;
456
+ margin-top: 2px;
446
457
  }
447
458
 
448
459
  #header li {
449
460
  float: left;
461
+ border:1px solid grey;
462
+ -webkit-border-radius: 20px;
463
+ -moz-border-radius: 20px;
464
+ border-radius: 20px;
465
+ height: 30px;
466
+ background-color: grey;
467
+ margin-left: 10px;
450
468
  }
451
469
 
452
470
  #header li a {
453
- padding: 0 .5em 0 .5em;
471
+ padding: 1em 1em 1em 1em;
472
+ line-height: 30px;
473
+ color:white;
454
474
  }
455
475
 
456
476
  .notice {
457
477
  min-height: 2em;
458
- background-color: #FFD;
478
+ background-color: #dff0d8;
479
+ border:3px solid #d6e9c6;
480
+ -webkit-border-radius: 10px;
481
+ -moz-border-radius: 10px;
482
+ border-radius: 10px;
459
483
  text-align: center;
460
484
  padding-top: .5em;
461
485
  margin-bottom: .5em;
@@ -463,8 +487,275 @@ body {
463
487
 
464
488
  .alert {
465
489
  min-height: 2em;
466
- background-color: #FDD;
490
+ background-color: #f2dede;
491
+ border:3px solid #eed3d7;
492
+ -webkit-border-radius: 10px;
493
+ -moz-border-radius: 10px;
494
+ border-radius: 10px;
467
495
  text-align: center;
468
496
  padding-top: .5em;
469
497
  margin-bottom: .5em;
470
- }
498
+ }
499
+
500
+ .phrasing-version-value{
501
+ width: 520px;
502
+ padding-right: 20px;
503
+ }
504
+
505
+ table.phrase-versions{
506
+ border-bottom: none;
507
+ }
508
+ table.phrase-versions tr{
509
+ vertical-align: middle;
510
+ }
511
+ table.phrase-versions th{
512
+ text-align:center;
513
+ font-weight: bold;
514
+ }
515
+ table.phrase-versions tr td{
516
+ border-top: 1px solid black;
517
+ }
518
+
519
+ textarea#phrasing_phrase_value{
520
+ height:100px;
521
+ }
522
+
523
+ .phrasing-version-created_at{
524
+ text-align: center
525
+ }
526
+
527
+ .btn.btn-danger.delete-phrase{
528
+ width:130px;
529
+ float: right;
530
+ }
531
+ .submit-edit-phrase{
532
+ float:right;
533
+ }
534
+ /*
535
+ ===========BUTTONS FROM BOOTSTRAP 3
536
+ */
537
+ .btn {
538
+ display: inline-block;
539
+ *display: inline;
540
+ padding: 4px 12px;
541
+ margin-bottom: 0;
542
+ *margin-left: .3em;
543
+ font-size: 14px;
544
+ line-height: 20px;
545
+ color: #FFF;
546
+ text-decoration: none;
547
+ text-align: center;
548
+ text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
549
+ vertical-align: middle;
550
+ cursor: pointer;
551
+ background-color: #f5f5f5;
552
+ *background-color: #e6e6e6;
553
+ background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
554
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
555
+ background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
556
+ background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
557
+ background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
558
+ background-repeat: repeat-x;
559
+ border: 1px solid #cccccc;
560
+ *border: 0;
561
+ border-color: #e6e6e6 #e6e6e6 #bfbfbf;
562
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
563
+ border-bottom-color: #b3b3b3;
564
+ -webkit-border-radius: 4px;
565
+ -moz-border-radius: 4px;
566
+ border-radius: 4px;
567
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
568
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
569
+ *zoom: 1;
570
+ -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
571
+ -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
572
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
573
+ }
574
+
575
+ a.btn:visited{
576
+ color:white;
577
+ }
578
+
579
+ .btn:hover,
580
+ .btn:focus,
581
+ .btn:active,
582
+ .btn.active,
583
+ .btn.disabled,
584
+ .btn[disabled] {
585
+ color: #FFF;
586
+ background-color: #e6e6e6;
587
+ *background-color: #d9d9d9;
588
+ }
589
+
590
+ .btn:active,
591
+ .btn.active {
592
+ background-color: #cccccc \9;
593
+ }
594
+
595
+ .btn:first-child {
596
+ *margin-left: 0;
597
+ }
598
+
599
+ .btn:hover,
600
+ .btn:focus {
601
+ color: #333333;
602
+ text-decoration: none;
603
+ background-position: 0 -15px;
604
+ -webkit-transition: background-position 0.1s linear;
605
+ -moz-transition: background-position 0.1s linear;
606
+ -o-transition: background-position 0.1s linear;
607
+ transition: background-position 0.1s linear;
608
+ }
609
+
610
+ .btn:focus {
611
+ outline: thin dotted #333;
612
+ outline: 5px auto -webkit-focus-ring-color;
613
+ outline-offset: -2px;
614
+ }
615
+
616
+ .btn.active,
617
+ .btn:active {
618
+ background-image: none;
619
+ outline: 0;
620
+ -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
621
+ -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
622
+ box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
623
+ }
624
+
625
+ .btn.disabled,
626
+ .btn[disabled] {
627
+ cursor: default;
628
+ background-image: none;
629
+ opacity: 0.65;
630
+ filter: alpha(opacity=65);
631
+ -webkit-box-shadow: none;
632
+ -moz-box-shadow: none;
633
+ box-shadow: none;
634
+ }
635
+
636
+ .btn-large {
637
+ padding: 11px 19px;
638
+ font-size: 17.5px;
639
+ -webkit-border-radius: 6px;
640
+ -moz-border-radius: 6px;
641
+ border-radius: 6px;
642
+ }
643
+
644
+ .btn-large [class^="icon-"],
645
+ .btn-large [class*=" icon-"] {
646
+ margin-top: 4px;
647
+ }
648
+
649
+ .btn-small {
650
+ padding: 2px 10px;
651
+ font-size: 11.9px;
652
+ -webkit-border-radius: 3px;
653
+ -moz-border-radius: 3px;
654
+ border-radius: 3px;
655
+ }
656
+
657
+ .btn-small [class^="icon-"],
658
+ .btn-small [class*=" icon-"] {
659
+ margin-top: 0;
660
+ }
661
+
662
+ .btn-mini [class^="icon-"],
663
+ .btn-mini [class*=" icon-"] {
664
+ margin-top: -1px;
665
+ }
666
+
667
+ .btn-mini {
668
+ padding: 0 6px;
669
+ font-size: 10.5px;
670
+ -webkit-border-radius: 3px;
671
+ -moz-border-radius: 3px;
672
+ border-radius: 3px;
673
+ }
674
+
675
+ .btn-block {
676
+ display: block;
677
+ width: 100%;
678
+ padding-right: 0;
679
+ padding-left: 0;
680
+ -webkit-box-sizing: border-box;
681
+ -moz-box-sizing: border-box;
682
+ box-sizing: border-box;
683
+ }
684
+
685
+ .btn-block + .btn-block {
686
+ margin-top: 5px;
687
+ }
688
+
689
+ .btn-primary.active,
690
+ .btn-warning.active,
691
+ .btn-danger.active,
692
+ .btn-success.active,
693
+ .btn-info.active,
694
+ .btn-inverse.active {
695
+ color: rgba(255, 255, 255, 0.75);
696
+ }
697
+
698
+ .btn-danger {
699
+ color: #ffffff;
700
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
701
+ background-color: #da4f49;
702
+ *background-color: #bd362f;
703
+ background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
704
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
705
+ background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
706
+ background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
707
+ background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
708
+ background-repeat: repeat-x;
709
+ border-color: #bd362f #bd362f #802420;
710
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
711
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0);
712
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
713
+ }
714
+ .btn-danger:hover,
715
+ .btn-danger:focus,
716
+ .btn-danger:active,
717
+ .btn-danger.active,
718
+ .btn-danger.disabled,
719
+ .btn-danger[disabled] {
720
+ color: #ffffff;
721
+ background-color: #bd362f;
722
+ *background-color: #a9302a;
723
+ }
724
+ .btn-danger:active,
725
+ .btn-danger.active {
726
+ background-color: #942a25 \9;
727
+ }
728
+
729
+ .btn-success {
730
+ color: #ffffff;
731
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
732
+ background-color: #5bb75b;
733
+ *background-color: #51a351;
734
+ background-image: -moz-linear-gradient(top, #62c462, #51a351);
735
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
736
+ background-image: -webkit-linear-gradient(top, #62c462, #51a351);
737
+ background-image: -o-linear-gradient(top, #62c462, #51a351);
738
+ background-image: linear-gradient(to bottom, #62c462, #51a351);
739
+ background-repeat: repeat-x;
740
+ border-color: #51a351 #51a351 #387038;
741
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
742
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
743
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
744
+ }
745
+
746
+ .btn-success:hover,
747
+ .btn-success:focus,
748
+ .btn-success:active,
749
+ .btn-success.active,
750
+ .btn-success.disabled,
751
+ .btn-success[disabled] {
752
+ color: #ffffff;
753
+ background-color: #51a351;
754
+ *background-color: #499249;
755
+ }
756
+
757
+ .btn-success:active,
758
+ .btn-success.active {
759
+ background-color: #408140 \9;
760
+ }
761
+