Skip to content
This repository was archived by the owner on Mar 29, 2025. It is now read-only.

Commit 6ed4147

Browse files
MilovanovicMatijaMilovanovicMatija
authored
Reskin for tutorial pages (#394)
1 parent 8300d0f commit 6ed4147

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+21770
-415
lines changed

Diff for: ‎.hugo_build.lock

Whitespace-only changes.

Diff for: ‎static/css/header.css

+1,325
Large diffs are not rendered by default.

Diff for: ‎static/css/page-footer.css

+1,183
Large diffs are not rendered by default.

Diff for: ‎static/css/reskin.css

+491
Large diffs are not rendered by default.

Diff for: ‎static/css/style.min.css

+18,071-1
Large diffs are not rendered by default.

Diff for: ‎static/images/single-bg.svg

+3
Loading

Diff for: ‎themes/hugo-tutorials/layouts/_default/list.html

+43-85
Original file line numberDiff line numberDiff line change
@@ -5,102 +5,60 @@
55
{{ partial "page_header.html" . }}
66

77
<div class="page-intro page-intro__home">
8-
<div class="container">
9-
10-
<div class="page-intro__header">
11-
12-
<h1 class="page-intro__title">Let's Take a Tour of Dgraph</h1>
13-
<p class="page-intro__subtitle" style="max-width: 520px;">An interactive tutorial with real queries and real results,
14-
designed to run on Chrome on your machine.</p>
15-
16-
<a href="{{ range first 1 .Site.Menus.main }}{{ .URL }}{{ end }}" class="button button--primary">
17-
<span>Get Started</span>
18-
<i class="fas fa-arrow-right"></i>
19-
</a>
20-
21-
</div>
22-
8+
<div class="container">
9+
<div class="page-intro__header">
10+
<h1 class="title_small">DGRAPH TOUR</h1>
11+
<h1 class="page-intro__title">Let's Take a Tour of Dgraph</h1>
12+
<p class="page-intro__subtitle">An interactive tutorial with real queries and real results, designed to run on Chrome on your machine.</p>
2313
</div>
14+
</div>
2415
</div>
2516

26-
<section class="page-body pt-0">
27-
28-
<div class="section--large lesson-tiles-container">
29-
<div class="container" data-context='graphql'>
30-
31-
<h1>Which Language Suits You?</h1>
32-
33-
<div class="lesson-tiles-switcher">
34-
<div data-context='graphql'>
35-
<p>GraphQL</p>
36-
<span>Dgraph's Generated API</span>
37-
</div>
38-
<div data-context='dql'>
39-
<p>DQL</p>
40-
<span>Dgraph's Query Language</span>
41-
</div>
42-
</div>
43-
<div class="lesson-tiles">
44-
{{ range .Site.Menus.main }}
45-
<div class="tile lesson-tiles__tile" data-context='{{ if in .Identifier "graphql" }}graphql{{ else }}dql{{ end }}'>
46-
47-
<p>
48-
{{ .Name }}
49-
<span> {{ index $.Site.Params.menudesc .Identifier }}</span>
50-
</p>
17+
<section class="page-body pt-0">
18+
<div class="section--large lesson-tiles-container" style="margin-bottom: 0px !important">
19+
<div class="container" data-context="graphql">
20+
<h2 class="main-title">Which Language Suits You?</h2>
5121

52-
<div class="lesson-tiles__link">
53-
<a href="{{ .URL }}" class="button button--secondary">
54-
<span>Start</span>
55-
<i class="fas fa-arrow-right"></i>
56-
</a>
57-
<span class="status" data-course="{{ .Identifier }}">{{ with .Params.time }}{{ . }}{{ end }}</span>
58-
</div>
59-
60-
</div>
61-
{{ end }}
62-
63-
</div>
64-
65-
</div>
66-
</div><div class="section">
67-
<div class="container">
68-
<div class="w-100 text-center">
69-
<h2 class="mb-5">Stay in the Loop with Dgraph</h2>
22+
<div class="lesson-tiles-switcher">
23+
<div data-context="graphql">
24+
<p style="font-weight: normal">GraphQL</p>
25+
<span>Dgraph's Generated API</span>
26+
</div>
27+
<div data-context="dql">
28+
<p style="font-weight: normal">DQL</p>
29+
<span>Dgraph's Query Language</span>
7030
</div>
71-
<div class="row"><a href="https://discuss.dgraph.io/" class="col-md-4 large-card">
72-
<div class="connect-graphic"><img src='{{ relURL "/images/discuss.png" }}' class="w-100"></div>
73-
<h3 class="mt-4">Discuss Forum</h3>
74-
<p>Be part of the community passionate about building smarter apps.</p>
75-
<div class="link"><span>Join now</span><i class="fa fa-arrow-right" aria-hidden="true"></i></div></a><a href="https://dgraph.io/docs/" target="_blank" class="col-md-4 large-card">
76-
<div class="connect-graphic"><img src='{{ relURL "/images/docs.png" }}' class="w-100"></div>
77-
<h3 class="mt-4">Dgraph Docs</h3>
78-
<p>Get detailed information on how to get started with Dgraph.</p>
79-
<div class="link"><span>Get started</span><i class="fa fa-arrow-right" aria-hidden="true"></i></div></a><a href="http://cloud.dgraph.io" target="_blank" class="col-md-4 large-card">
80-
<div class="connect-graphic"><img src='{{ relURL "/images/dgraph-cloud.png" }}' class="w-100"></div>
81-
<h3 class="mt-4">Dgraph Cloud</h3>
82-
<p>Fully managed GraphQL backend in one click. The fastest way to build apps.</p>
83-
<div class="link"><span>Try free</span><i class="fa fa-arrow-right" aria-hidden="true"></i></div></a></div>
8431
</div>
8532
</div>
86-
</section>
87-
88-
<div class="section--jepsen section--small">
89-
<div class="container">
90-
<div class="row d-flex align-items-center">
91-
<div class="col-md-6 pr-5">
92-
<h2 class="mb-3">Need to learn GraphQL? <br>Meet<span class="text-gradient pl-2">Dgraph Learn</span></h2>
93-
<p>
94-
<just>Starting out with GraphQL? New to the world of graph databases? Dgraph has you covered! Dgraph Learn can take you from beginner to adept in less than four hours. Find the course that’s right for you.</just>
95-
</p><a href="https://dgraph.io/learn" class="button button--primary"><span>Teach me</span><i class="fa fa-arrow-right" aria-hidden="true"></i></a>
33+
</div>
34+
<div class="section--large lesson-tiles-container tiles-container">
35+
<div class="container container-narrow" data-context="graphql">
36+
<div class="lesson-tiles" style="all: unset !important">
37+
{{ $counter := 1 }} {{ range .Site.Menus.main }}
38+
<div class="tile" data-context='{{ if in .Identifier "graphql" }}graphql{{ else }}dql{{ end }}'>
39+
<div class="meta">
40+
<div>
41+
<p class="tile-counter">{{ $counter }}</p>
42+
<p class="tile-name">{{ .Name }}</p>
43+
<p class="tile-time">{{ with .Params.time }}<i class="fa-regular fa-clock" style="margin-right: 7px"></i>{{ . }}{{ end }}</p>
44+
<script src="https://kit.fontawesome.com/37543023ae.js" crossorigin="anonymous"></script>
45+
</div>
46+
<span class="tile-description">{{ index $.Site.Params.menudesc .Identifier }}</span>
47+
{{ $counter = add $counter 1 }}
48+
</div>
49+
<div class="lesson-tiles__link">
50+
<a href="{{ .URL }}" class="button button--primary-custom lesson-button">
51+
<span>Start</span>
52+
</a>
9653
</div>
97-
<div class="col-lg-6 d-flex justify-content-center"><img src='{{ relURL "/images/learn-illustration.svg" }}'></div>
9854
</div>
55+
{{ end }}
9956
</div>
100-
</div>
101-
102-
{{ partial "page_footer.html" . }}
57+
</div>
58+
</div>
59+
</section>
10360

61+
{{ partial "page_footer.html" . }}
10462
</body>
10563

10664
{{ partial "footer.html" . }}

Diff for: ‎themes/hugo-tutorials/layouts/_default/single.html

+16-14
Original file line numberDiff line numberDiff line change
@@ -7,52 +7,54 @@
77

88
{{ partial "page_header.html" . }}
99

10-
<div class="d-block d-lg-none tour-message">
10+
<!-- <div class="d-block d-lg-none tour-message">
1111
To optimize your experience, the interactive tutorial is only available on desktop.
12-
</div>
12+
</div> -->
1313

1414
<section class="page-body new">
1515
<div class="page-body__content">
1616
<div class="lesson" {{ if eq .Params.completed 1 }}data-completed="{{ .Section }}"{{ end }}>
1717
<div class="lesson__content" id="lesson-content">
1818
<div id="lesson-content-inner">
1919
<h2 class="lesson__tour__type">Dgraph {{ if in .Section "graphql" }}GraphQL{{ else }}DQL{{ end }} Tour</h2>
20-
<h2 class="lesson__Category">{{ with .Params.courseName }}{{ . }}{{ else }}{{ (index (split .File.Dir "/") 0) }}{{ end }}</h2>
21-
<h2 class="lesson__title">{{ .Title }}</h2>
22-
20+
<div class="category_title">
21+
<h2 class="lesson__Category">{{ with .Params.courseName }}{{ . }}{{ else }}{{ (index (split .File.Dir "/") 0) }}{{ end }}</h2>
22+
<h2 class="lesson__title">{{ .Title }}</h2>
23+
</div>
2324
{{ .Content }}
25+
2426
</div>
2527
{{ partial "page_navigation_modal.html" . }}
2628
</div>
2729
<div class="lesson__resizer" ></div>
2830
{{ with .Params.iframeURL }}
29-
<div class="lesson__code modal-bakdrop d-none d-lg-block">
31+
<div class="lesson__code modal-bakdrop block">
3032
<iframe src="{{ . }}" style="width: 100%; height: 100%;" ></iframe>
3133
</div>
3234
{{ else }}
3335
{{ if eq .Params.iFrameRatel 1 }}
34-
<div class="lesson__code modal-bakdrop d-none d-lg-block">
36+
<div class="lesson__code modal-bakdrop block">
3537
<iframe class='ratel {{ if eq .Params.endpoint "/mutate" }}mutate{{ else }}query{{ end }}' {{ if ne .Params.endpoint "/mutate"}}data-code='{{ $codeContent }}'{{ end }} src="https://play.dgraph.io/?latest" style="width: 100%; height: 100%;" ></iframe>
3638
</div>
3739
{{ else if eq .Params.type "graphql/schema" }}
38-
<div class="lesson__code modal-bakdrop d-none d-lg-block">
40+
<div class="lesson__code modal-bakdrop block">
3941
{{ partial "schema" (dict "Content" . "Code" $codeContent) }}
4042
</div>
4143
{{ else if (eq $codeContent "") }}
42-
<div class="lesson__code modal-bakdrop d-none d-lg-block empty">
43-
<img src='{{ relURL "/images/dgraph-pattern.svg" }}' />
44+
<div class="lesson__code modal-bakdrop d-none d-lg-block empty custom-class">
45+
<img src='{{ relURL "/images/single-bg.svg" }}' />
4446
</div>
4547
{{ else if eq .Params.type "graphql" }}
46-
<div class="lesson__code modal-bakdrop d-none d-lg-block">
48+
<div class="lesson__code modal-bakdrop block" style="background-color: #B8B7BA !important;">
4749
{{ partial "graphql" (dict "Content" . "Code" $codeContent) }}
4850
</div>
4951
{{ else if not (eq $codeContent "") }}
50-
<div class="lesson__code modal-bakdrop d-none d-lg-block">
52+
<div class="lesson__code modal-bakdrop block">
5153
{{ partial "runnable" (dict "Content" . "Code" $codeContent) }}
5254
</div>
5355
{{else}}
54-
<div class="lesson__code modal-bakdrop d-none d-lg-block empty">
55-
<img src='{{ relURL "/images/dgraph-pattern.svg" }}' />
56+
<div class="lesson__code modal-bakdrop d-none d-lg-block empty custom-class">
57+
<img src='{{ relURL "/images/single-bg.svg" }}' />
5658
</div>
5759
{{ end }}
5860
{{ end }}

Diff for: ‎themes/hugo-tutorials/layouts/partials/graphql.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<div class="runnable {{ .Content.Params.type }}" data-type="{{ .Content.Params.type }}" data-initial="{{ .Code }}" data-current="{{ .Code }}" endpoint="" data-dirty="false">
2-
<div class="runnable-pane runnable-pane-query">
3-
<div class="topbar">
1+
<div class="runnable {{ .Content.Params.type }}" data-type="{{ .Content.Params.type }}" data-initial="{{ .Code }}" data-current="{{ .Code }}" endpoint="" data-dirty="false" >
2+
<div class="runnable-pane runnable-pane-query" style="margin: 0 !important;">
3+
<div class="topbar" style="background-color: #fff !important; border-bottom: #B8B7BA 2 solid;">
44
{{ if (isset .Content.Params "playground") }}
55
<div class="pane-title">
66
<span>Playground:</span>
@@ -10,7 +10,7 @@
1010
</span>
1111
<div class="actions">
1212
<a class="button button--small button--outline" data-action="reset" href="#">Reset</a>
13-
<a class="button button--small" data-action="run-graphql-playground" href="#">Run</a>
13+
<a class="button button--small button--outline" data-action="run-graphql-playground" href="#">Run</a>
1414
</div>
1515
{{ else }}
1616
<div class="pane-title">
@@ -24,7 +24,7 @@
2424
</span>
2525
<div class="actions">
2626
<a class="button button--small button--outline" data-action="reset" href="#">Reset</a>
27-
<a class="button button--small" data-action="run-graphql" href="#">Run</a>
27+
<a class="button button--small button--outline" data-action="run-graphql" href="#">Run</a>
2828
</div>
2929
{{ end }}
3030
</div>

Diff for: ‎themes/hugo-tutorials/layouts/partials/header.html

+31-18
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
<html lang="en">
33

44
<head>
5-
<meta charset="utf-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
77
<!-- Google Tag Manager -->
88
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
99
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
@@ -16,7 +16,7 @@
1616
<!-- "title - site-title" if not main page -->
1717
<title>
1818
{{ if not (eq .Section "") }}
19-
{{ .Title }} | {{ humanize .Page.Section }} | Dgraph Tour
19+
{{ .Title }} | {{ humanize .Page.Section }} | Dgraph Tour
2020

2121
{{ else }}
2222
{{ .Site.Title }}
@@ -28,29 +28,42 @@
2828
{{- end }}
2929
<link rel="canonical" href="{{ $canonicalUrl }}" />
3030

31-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500&display=swap" />
32-
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
33-
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
34-
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
35-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
36-
<link href='{{ relURL "/css/style.min.css" }}?100820120' rel="stylesheet" type="text/css" />
37-
<link href='{{ relURL "/css/runnable-custom.css" }}?{{ md5 (readFile "themes/hugo-tutorials/static/css/runnable-custom.css") }}' rel="stylesheet"/>
38-
<link href='{{ relURL "/css/theme.css" }}?{{ md5 (readFile "themes/hugo-tutorials/static/css/theme.css") }}' rel="stylesheet"/>
31+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500&display=swap" />
32+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
33+
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
34+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
35+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
36+
<link href='{{ relURL "/css/style.min.css" }}?100820120' rel="stylesheet" type="text/css" />
37+
<link href='{{ relURL "/css/runnable-custom.css" }}?{{ md5 (readFile "themes/hugo-tutorials/static/css/runnable-custom.css") }}' rel="stylesheet" />
38+
<link href='{{ relURL "/css/theme.css" }}?{{ md5 (readFile "themes/hugo-tutorials/static/css/theme.css") }}' rel="stylesheet" />
3939

40-
<link href='{{ relURL "/css/font-awesome/css/all.css" }}' rel="stylesheet"/>
40+
<link href='{{ relURL "/css/font-awesome/css/all.css" }}' rel="stylesheet" />
4141

42-
<link href="{{ .Site.BaseURL }}/css/font-awesome/css/all.css" rel="stylesheet" />
42+
<link href="{{ .Site.BaseURL }}/css/font-awesome/css/all.css" rel="stylesheet" />
4343

44-
<!-- Segment Tracking -->
44+
<!-- Tween Marquee -->
45+
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
4546

47+
<!-- Segment Tracking -->
4648

4749
<script src='{{ relURL "/js/app.js" }}?{{ md5 (readFile "themes/hugo-tutorials/static/js/app.js") }}'></script>
4850

51+
<!-- Fonts -->
52+
<link rel="preconnect" href="https://fonts.googleapis.com" />
53+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
54+
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet" />
55+
56+
<script src='{{ relURL "/js/app.js" }}?{{ md5 (readFile "themes/hugo-tutorials/static/js/app.js") }}'></script>
57+
<link rel="stylesheet" href='{{ relURL "/css/page-footer.css" }}' />
58+
<link rel="stylesheet" href='{{ relURL "/css/header.css" }}' />
59+
<link rel="stylesheet" href='{{ relURL "/css/reskin.css" }}' />
4960
</head>
5061

5162
<body>
5263
<!-- Google Tag Manager (noscript) -->
53-
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-58V4RXS"
54-
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
55-
<!-- End Google Tag Manager (noscript) -->
56-
<main>
64+
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-58V4RXS" height="0" width="0" style="display: none; visibility: hidden"></iframe></noscript>
65+
<!-- End Google Tag Manager (noscript) -->
66+
<main></main>
67+
</body>
68+
69+
</html>

0 commit comments

Comments
 (0)