Skip to content
Next
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Switch to GitLab Next
Sign in / Register
Toggle navigation
Minds Frontend
Project
Project
Details
Activity
Releases
Cycle Analytics
Insights
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Locked Files
Issues
871
Issues
871
List
Boards
Labels
Service Desk
Milestones
Merge Requests
47
Merge Requests
47
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Security & Compliance
Security & Compliance
Dependency List
Packages
Packages
List
Container Registry
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Minds
Minds Frontend
Compare Revisions
ea18b76d1e12372aa9896f0d6d1c40ff9b37062e...789b70d3909f63bebb95beaef17bc8998bd37859
Source
789b70d3909f63bebb95beaef17bc8998bd37859
Select Git revision
...
Target
ea18b76d1e12372aa9896f0d6d1c40ff9b37062e
Select Git revision
Compare
Commits (2)
(refactor): buy tokens; mobile; foundation
· 9a19e2ea
Emiliano Balbuena
authored
1 day ago
9a19e2ea
(refactor): Top prototype
· 789b70d3
Emiliano Balbuena
authored
1 day ago
789b70d3
Hide whitespace changes
Inline
Side-by-side
Showing
11 changed files
with
205 additions
and
85 deletions
+205
-85
src/app/common/components/marketing/footer.component.scss
src/app/common/components/marketing/footer.component.scss
+5
-1
src/app/common/components/marketing/marketing-styles.scss
src/app/common/components/marketing/marketing-styles.scss
+75
-0
src/app/common/components/marketing/marketing.component.html
src/app/common/components/marketing/marketing.component.html
+5
-3
src/app/common/components/marketing/marketing.component.scss
src/app/common/components/marketing/marketing.component.scss
+5
-6
src/app/foundation/buttons.scss
src/app/foundation/buttons.scss
+20
-0
src/app/modules/upgrades/buy-tokens.component.html
src/app/modules/upgrades/buy-tokens.component.html
+33
-22
src/app/modules/upgrades/buy-tokens.component.scss
src/app/modules/upgrades/buy-tokens.component.scss
+34
-4
src/app/modules/upgrades/upgrade-options.component.scss
src/app/modules/upgrades/upgrade-options.component.scss
+1
-2
src/app/modules/upgrades/upgrades.component.html
src/app/modules/upgrades/upgrades.component.html
+20
-47
src/app/modules/upgrades/upgrades.component.scss
src/app/modules/upgrades/upgrades.component.scss
+4
-0
src/stylesheets/themes.scss
src/stylesheets/themes.scss
+3
-0
No files found.
src/app/common/components/marketing/footer.component.scss
View file @
789b70d3
...
...
@@ -4,10 +4,14 @@ m-marketing__footer {
display
:
block
;
margin-top
:
105px
;
@media
screen
and
(
max-width
:
$m-grid-min-vp
)
{
margin-top
:
80px
;
}
@include
m-theme
()
{
background
:
linear-gradient
(
180deg
,
themed
(
$m-
grey-50
)
0
.01
%
,
themed
(
$m-
bg-gradient-start
)
0
%
,
themed
(
$m-white
)
100%
);
}
...
...
This diff is collapsed.
Click to expand it.
src/app/common/components/marketing/marketing-styles.scss
0 → 100644
View file @
789b70d3
.m-marketing__main
,
.m-marketing__section
{
// Common
.m-marketing--title
,
h1
{
font-weight
:
900
;
font-size
:
42px
;
line-height
:
44px
;
margin
:
0
0
23px
;
&
.m-marketing--title__bigger-title
{
font-size
:
48px
;
line-height
:
53px
;
margin-bottom
:
26px
;
}
em
{
font-style
:
inherit
;
text-decoration
:
inherit
;
white-space
:
nowrap
;
position
:
relative
;
&
:
:
after
{
content
:
''
;
display
:
inline-block
;
position
:
absolute
;
background
:
rgba
(
80
,
226
,
195
,
0
.3
);
top
:
0
.36em
;
left
:
-0
.03em
;
right
:
-0
.03em
;
bottom
:
0
.22em
;
pointer-events
:
none
;
}
}
}
p
.m-marketing__description
{
font-size
:
18px
;
line-height
:
27px
;
margin
:
0
0
36px
;
}
ul
.m-marketing__points
{
list-style
:
disc
;
margin
:
0
0
45px
;
padding
:
0
0
0
1em
;
font-size
:
16px
;
line-height
:
21px
;
>
li
{
margin-bottom
:
19px
;
&
:last-child
{
margin-bottom
:
0
;
}
}
}
// Style 1
.m-marketing__section--style-1
{
@include
m-theme
()
{
background
:
linear-gradient
(
180deg
,
themed
(
$m-white
)
0%
,
themed
(
$m-bg-gradient-start
)
100%
);
}
.m-marketing__wrapper
{
padding
:
95px
0
85px
;
}
}
}
This diff is collapsed.
Click to expand it.
src/app/common/components/marketing/marketing.component.html
View file @
789b70d3
<div
class=
"m-marketing"
>
<ng-content
select=
".m-marketing__main"
></ng-content>
<div
class=
"m-marketing__mainWrapper"
>
<ng-content
select=
".m-marketing__main"
></ng-content>
</div>
<div
class=
"m-marketing__sep"
*ngIf=
"bodyWrapper?.children?.length > 0"
></div>
<div
class=
"m-marketing__
body
Wrapper"
#bodyWrapper
>
<ng-content
select=
".m-marketing__
body
"
></ng-content>
<div
class=
"m-marketing__
extras
Wrapper"
#bodyWrapper
>
<ng-content
select=
".m-marketing__
extras
"
></ng-content>
</div>
</div>
...
...
This diff is collapsed.
Click to expand it.
src/app/common/components/marketing/marketing.component.scss
View file @
789b70d3
...
...
@@ -37,11 +37,10 @@ m-marketing {
}
}
.m-marketing__body
{
>
*
>
*
{
max-width
:
1084px
;
margin
:
0
auto
;
box-sizing
:
border-box
;
}
.m-marketing__wrapper
,
.m-marketing__extras
>
*
>
*
{
max-width
:
1084px
;
margin
:
0
auto
;
box-sizing
:
border-box
;
}
}
This diff is collapsed.
Click to expand it.
src/app/foundation/buttons.scss
View file @
789b70d3
@import
'./grid-values'
;
@import
'../../stylesheets/themes'
;
.mf-button
{
display
:
inline-block
;
padding
:
14px
32px
;
font
:
inherit
;
font-size
:
18px
;
line-height
:
24px
;
border
:
1px
solid
;
...
...
@@ -8,6 +12,10 @@
font-weight
:
400
;
cursor
:
pointer
;
user-select
:
none
;
white-space
:
nowrap
;
text-align
:
center
;
appearance
:
none
;
text-decoration
:
none
;
@include
m-theme
()
{
background
:
themed
(
$m-blue
);
...
...
@@ -15,6 +23,18 @@
border-color
:
themed
(
$m-blue
);
}
@media
screen
and
(
max-width
:
$m-grid-min-vp
)
{
display
:
block
;
font-size
:
15px
;
padding
:
12px
15px
;
}
&
.mf-button--always-inline
{
@media
screen
and
(
max-width
:
$m-grid-min-vp
)
{
display
:
inline-block
;
}
}
&
.mf-button--hollow
{
@include
m-theme
()
{
background
:
themed
(
$m-white
);
...
...
This diff is collapsed.
Click to expand it.
src/app/modules/upgrades/buy-tokens.component.html
View file @
789b70d3
<
div
class=
"m-upgrades__buyTokens"
>
<div
class=
"m-upgradesBuyTokens__body"
>
<h2>
Buy Tokens
</h2
>
<
ng-template
#buyTokensRateTpl
>
32 tokens = 32,000 page views
</ng-template
>
<p
class=
"m-upgradesBuyTokens__description"
>
Expand your reach with Boost and support your favorite channels with Wire.
</p>
<div
class=
"m-upgrades__buyTokens"
>
<div
class=
"m-upgradesBuyTokens__wrapper"
>
<div
class=
"m-upgradesBuyTokens__body"
>
<h2>
Buy Tokens
</h2>
<p
>
<a>
Learn more about tokens
</a>
</p>
</div
>
<p
class=
"m-upgradesBuyTokens__description"
>
Expand your reach with Boost and support your favorite channels with
Wire.
</p
>
<div
class=
"m-upgradesBuyTokens__form"
>
<div
class=
"upgradesBuyTokens__amount"
>
<label
for=
"m-upgradesBuyTokens__amountInput"
>
$
</label>
<input
type=
"number"
name=
"amount"
id=
"m-upgradesBuyTokens__amountInput"
/>
<p>
<a>
Learn more about tokens
</a>
</p>
</div>
<div
class=
"upgradesBuyTokens__rate"
>
32 tokens = 32,000 page views
<div
class=
"m-upgradesBuyTokens__form"
>
<div
class=
"upgradesBuyTokens__amount"
>
<label
for=
"m-upgradesBuyTokens__amountInput"
>
$
</label>
<input
type=
"number"
name=
"amount"
id=
"m-upgradesBuyTokens__amountInput"
/>
</div>
<div
class=
"upgradesBuyTokens__rate"
>
<ng-container
*ngTemplateOutlet=
"buyTokensRateTpl"
></ng-container>
</div>
<div
class=
"upgradesBuyTokens__action"
>
<button
class=
"mf-button"
>
Buy Tokens
</button>
</div>
</div>
<div
class=
"
upgradesBuyTokens__action
"
>
<
button
class=
"m-upgrades__button"
>
Buy Tokens
</button
>
<div
class=
"
m-upgradesBuyTokens__overflownRate
"
>
<
ng-container
*ngTemplateOutlet=
"buyTokensRateTpl"
></ng-container
>
</div>
</div>
</div>
This diff is collapsed.
Click to expand it.
src/app/modules/upgrades/buy-tokens.component.scss
View file @
789b70d3
...
...
@@ -3,17 +3,28 @@ m-upgrades__buyTokens {
}
.m-upgrades__buyTokens
{
position
:
relative
;
padding
:
40px
60px
60px
;
margin-bottom
:
105px
;
background
:
#726061
;
color
:
#ffffff
;
.m-upgradesBuyTokens__wrapper
{
padding
:
40px
60px
60px
;
background
:
url('http://placekitten.com/591/362')
no-repeat
right
center
#726061
;
background-size
:
contain
;
color
:
#ffffff
;
@media
screen
and
(
max-width
:
$m-grid-min-vp
)
{
background-image
:
none
;
padding
:
30px
;
margin
:
0
20px
;
}
}
.m-upgradesBuyTokens__body
{
max-width
:
320px
;
}
h2
{
margin
:
0
0
12px
;
font-size
:
32px
;
font-weight
:
900
;
line-height
:
43px
;
...
...
@@ -27,6 +38,7 @@ m-upgrades__buyTokens {
}
&
.m-upgradesBuyTokens__description
{
margin-bottom
:
25px
;
opacity
:
0
.6
;
}
}
...
...
@@ -51,6 +63,10 @@ m-upgrades__buyTokens {
@include
m-theme
()
{
color
:
themed
(
$m-grey-300
);
}
@media
screen
and
(
max-width
:
$m-grid-min-vp
)
{
display
:
none
;
}
}
.upgradesBuyTokens__amount
{
...
...
@@ -93,7 +109,21 @@ m-upgrades__buyTokens {
box-shadow
:
0
1px
0
rgba
(
themed
(
$m-black
)
,
0
.2
);
}
}
@media
screen
and
(
max-width
:
$m-grid-min-vp
)
{
max-width
:
calc
(
100%
-
20px
);
}
}
}
}
.m-upgradesBuyTokens__overflownRate
{
display
:
none
;
margin
:
24px
0
0
;
color
:
#9b9b9b
;
@media
screen
and
(
max-width
:
$m-grid-min-vp
)
{
display
:
block
;
}
}
}
This diff is collapsed.
Click to expand it.
src/app/modules/upgrades/upgrade-options.component.scss
View file @
789b70d3
...
...
@@ -11,7 +11,7 @@ m-upgrades__upgradeOptions {
@media
screen
and
(
max-width
:
$m-grid-min-vp
)
{
display
:
block
;
margin
:
0
40px
2
5
px
;
margin
:
0
40px
2
0
px
;
}
h2
{
...
...
@@ -147,7 +147,6 @@ m-upgrades__upgradeOptions {
}
.m-upgradesUpgradeOptionsPlan__action
{
display
:
inline-block
;
margin-top
:
25px
;
}
}
...
...
This diff is collapsed.
Click to expand it.
src/app/modules/upgrades/upgrades.component.html
View file @
789b70d3
<m-marketing
class=
"m-upgrades"
pageTitle=
"Upgrade your account"
i18n-pageTitle
>
<div
class=
"m-marketing__main"
>
<section
class=
"m-upgrades__grid m-upgrades__mainFeatures"
>
<div
class=
"m-upgrades__gridColumn--5"
>
<h1>
Upgrade your Minds experience
</h1>
<div
class=
"m-marketing__main m-marketing__section--style-1"
>
<div
class=
"m-marketing__wrapper"
>
<h1
class=
"m-marketing--title__bigger-title"
i18n
>
Upgrade you Minds experience
</h1>
<p
class=
"m-upgrades__description"
>
Minds offers a unique range of powerful upgrades that will supercharge
your Minds experience.
</p>
<p
class=
"m-marketing__description"
i18n
>
Minds offers a unique range of powerful upgrades that will supercharge
your Minds experience.
</p>
<ul
class=
"m-upgrades__features"
>
<li>
TBD
</li>
<li>
TBD
</li>
<li>
TBD
</li>
</ul>
<p>
<a
class=
"m-upgrades__button m-upgrades__button--hollow"
>
Upgrade Now
</a
>
</p>
</div>
<div
class=
"m-upgrades__gridColumn--7"
>
<!-- Main assets here -->
</div>
</section>
<section
class=
"m-upgrades__grid"
>
<ul
class=
"m-upgrades__gridColumn--12 m-upgrades__featuredIn"
>
<li>
As featured in
</li>
<li
class=
"m-upgrades__featuredInItem--big"
>
<img
src=
""
alt=
"BBC"
/>
</li>
<li><img
src=
""
alt=
"Fox News"
/></li>
<li><img
src=
""
alt=
"Forbes"
/></li>
<li><img
src=
""
alt=
"TechCrunch"
/></li>
<li><img
src=
""
alt=
"Reuters"
/></li>
<li><img
src=
""
alt=
"Wired"
/></li>
<li><img
src=
""
alt=
"The Joe Rogan Experience"
/></li>
<ul
class=
"m-marketing__points"
>
<li>
Lorem ipsum dolor sit amet.
</li>
<li>
Aliquam eveniet impedit maiores sapiente.
</li>
<li>
Aperiam laudantium nemo non soluta.
</li>
</ul>
</section>
<a
class=
"mf-button mf-button--hollow"
i18n
>
Upgrade now
</a>
</div>
</div>
<div
class=
"m-marketing__
body
"
>
<div
class=
"m-marketing__
extras
"
>
<m-upgrades
__upgradeOptions
></m-upgrades
__upgradeOptions
>
</div>
<div
class=
"m-marketing__
body
"
>
<div
class=
"m-marketing__
extras
"
>
<m-upgrades
__buyTokens
></m-upgrades
__buyTokens
>
</div>
</m-marketing>
This diff is collapsed.
Click to expand it.
src/app/modules/upgrades/upgrades.component.scss
View file @
789b70d3
...
...
@@ -73,5 +73,9 @@
m-upgrades__upgradeOptions
{
margin-bottom
:
110px
;
@media
screen
and
(
max-width
:
$m-grid-min-vp
)
{
margin-bottom
:
40px
;
}
}
}
This diff is collapsed.
Click to expand it.
src/stylesheets/themes.scss
View file @
789b70d3
...
...
@@ -121,6 +121,7 @@ $themes: (
m-white
:
$white
,
m-white-always
:
$white
,
m-body-bg
:
#f8f8f8
,
m-bg-gradient-start
:
#f9fafc
,
m-warn-bg
:
$amber-light
,
m-warn-fg
:
$black
,
m-facebook
:
$facebook
,
...
...
@@ -159,6 +160,7 @@ $themes: (
m-white
:
lighten
(
$grey-990
,
$percent
)
,
m-white-always
:
$white
,
m-body-bg
:
lighten
(
#080808
,
$percent
)
,
m-bg-gradient-start
:
#292827
,
m-blue-dark
:
lighten
(
$blue-bright
,
15%
)
,
m-blue
:
$blue-bright
,
m-blue-light
:
$blue-dark
,
...
...
@@ -215,6 +217,7 @@ $m-black-always: 'm-black-always';
$m-white
:
'm-white'
;
$m-white-always
:
'm-white-always'
;
$m-body-bg
:
'm-body-bg'
;
$m-bg-gradient-start
:
'm-bg-gradient-start'
;
$m-blue-dark
:
'm-blue-dark'
;
$m-blue
:
'm-blue'
;
...
...
This diff is collapsed.
Click to expand it.