Skip to content

Commit 08a285d

Browse files
F3rry-PCORAndrew-H-Procore
F3rry-PCOR
and
Andrew-H-Procore
authored
AGX-5147-add-easy-way-to-submit-feedback-on-developer-docs (#320)
* Add a feedback box - allowing users to submit feedback on page * Fix bug: the feedback box someties switch from 3 lines to 4 lines * Updating to add a media query, disabling feedback for smaller screens --------- Co-authored-by: Andrew Hemry <[email protected]>
1 parent 6b663bc commit 08a285d

File tree

3 files changed

+150
-119
lines changed

3 files changed

+150
-119
lines changed

‎_layouts/default.html‎

Lines changed: 67 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,70 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta name="description" content="Documentation for Procore developers" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<meta charset="utf-8">
7-
<title>{{ page.title }}</title>
8-
<base target="_parent">
9-
<link rel="stylesheet" href="{{ 'assets/css/main.css' | relative_url }}">
10-
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/nav.css"/>
11-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
12-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
13-
</head>
14-
15-
<body>
16-
17-
<nav>
18-
<input type="text" id="search-input" placeholder="Search Articles...">
19-
<ul id="results-container"></ul>
20-
{% for section in site.data.navigation %}
21-
<dl class="collapsible">
22-
<dt{% if page.section_title == section.title %} class="active trigger" {% endif %} class="trigger"><i class="icon fa-regular fa-square-plus"></i> {{ section.title }}</dt>
23-
<dl class="col_content">
24-
{% for item in section.items %}
25-
<dd{% if item.url == page.url %} class="active"{% endif %}>
26-
<a href="{% if item.absolute != true %}{{ site.url }}{{ site.baseurl }}{% endif %}{{ item.url }}">
27-
<!-- <a href="https://b601-208-127-107-52.ngrok-free.app/documentation{{ item.url }}"> -->
28-
{{ item.title }}
29-
</a>
30-
</dd>
31-
{% endfor %}</dl>
32-
33-
</dl>
34-
{% endfor %}
35-
</nav>
36-
37-
<article>
38-
<section>
39-
<header>
40-
<div class="title-wrapper">
41-
<h1>
42-
<button class="hamburger">
43-
<div></div>
44-
<div></div>
45-
<div></div>
46-
</button>
47-
{{ page.title }}
48-
<!-- <p>{{ page.sub_header }}</p> Sub-header as H2 -->
49-
</h1>
50-
<p class="sub-header">{{ page.sub_header }}</p> <!-- Sub-header as H2 -->
51-
</div>
52-
</header>
53-
<main>
54-
{{ content }}
55-
</main>
56-
</section>
57-
</article>
58-
<script src="https://unpkg.com/simple-jekyll-search@latest/dest/simple-jekyll-search.min.js"></script>
59-
<script src="{{ 'assets/js/nav.js' | relative_url }}"></script>
60-
</body>
3+
<head>
4+
<meta name="description" content="Documentation for Procore developers" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<meta charset="utf-8">
7+
<title>{{ page.title }}</title>
8+
<base target="_parent">
9+
<link rel="stylesheet" href="{{ 'assets/css/main.css' | relative_url }}">
10+
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/nav.css"/>
11+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
12+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
13+
</head>
14+
<body>
15+
<nav>
16+
<input type="text" id="search-input" placeholder="Search Articles...">
17+
<ul id="results-container"></ul>
18+
{% for section in site.data.navigation %}
19+
<dl class="collapsible">
20+
<dt{% if page.section_title == section.title %} class="active trigger" {% endif %} class="trigger"><i class="icon fa-regular fa-square-plus"></i> {{ section.title }}</dt>
21+
<dl class="col_content">
22+
{% for item in section.items %}
23+
<dd{% if item.url == page.url %} class="active"{% endif %}>
24+
<a href="{% if item.absolute != true %}{{ site.url }}{{ site.baseurl }}{% endif %}{{ item.url }}">
25+
<!-- <a href="https://b601-208-127-107-52.ngrok-free.app/documentation{{ item.url }}"> -->
26+
{{ item.title }}
27+
</a>
28+
</dd>
29+
{% endfor %}
30+
</dl>
31+
</dl>
32+
{% endfor %}
33+
</nav>
34+
<article>
35+
<section>
36+
<header>
37+
<div class="title-wrapper">
38+
<div class="page-title-container">
39+
<h1>
40+
<!--<button class="hamburger"><div></div><div></div><div></div></button>-->
41+
{{ page.title }}
42+
</h1>
43+
<p class="sub-header">{{ page.sub_header }}</p> <!-- Sub-header as H2 -->
44+
</div>
45+
<div class="feedback-card">
46+
<div class="feedback-content">
47+
<div class="feedback-text">
48+
<div class="feedback-title">We'd love your feedback!</div>
49+
<div class="feedback-message">Send us any feedback to</div>
50+
<div class="feedback-message">
51+
<a href="mailto:...">[email protected]</a>
52+
</div>
53+
</div>
54+
<svg class="feedback-icon" viewBox="0 0 24 24" fill="none" stroke="#f57d20" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
55+
<rect x="2" y="4" width="20" height="16" rx="2"></rect>
56+
<path d="m2 7 10 7 10-7"></path>
57+
</svg>
58+
</div>
59+
</div>
60+
</div>
61+
</header>
62+
<main>
63+
{{ content }}
64+
</main>
65+
</section>
66+
</article>
67+
<script src="https://unpkg.com/simple-jekyll-search@latest/dest/simple-jekyll-search.min.js"></script>
68+
<script src="{{ 'assets/js/nav.js' | relative_url }}"></script>
69+
</body>
6170
</html>

‎assets/css/main.css‎

Lines changed: 82 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,72 @@ body {
5151

5252
/* Title wrapper for border */
5353
.title-wrapper {
54+
display: flex;
55+
justify-content: space-between;
56+
align-items: center;
5457
border-bottom: 1px solid rgb(217, 217, 217); /* Moved border here */
5558
padding-bottom: 30px; /* Optional: adjust spacing */
5659
}
5760

61+
.feedback-card {
62+
display: inline-block;
63+
background: linear-gradient(135deg, #ffffff 0%, #fff5f0 100%);
64+
border: 1px solid #ffd9c2;
65+
border-radius: 8px;
66+
padding: 8px 12px;
67+
text-align: right;
68+
box-shadow: 0 1px 3px rgba(245, 125, 32, 0.1);
69+
margin-right: 46px;
70+
width: fit-content;
71+
flex-shrink: 0;
72+
min-width: 180px;
73+
margin-top: 8px;
74+
}
75+
@media (max-width: 800px) {
76+
.feedback-card {
77+
display: none;
78+
}
79+
}
80+
81+
.feedback-content {
82+
display: flex;
83+
align-items: center;
84+
justify-content: flex-end;
85+
gap: 10px;
86+
}
87+
88+
.feedback-text {
89+
text-align: right;
90+
}
91+
92+
.feedback-title {
93+
font-size: 13px;
94+
font-weight: 500;
95+
color: #333;
96+
margin-bottom: 2px;
97+
line-height: 1.3;
98+
}
99+
100+
.feedback-message {
101+
font-size: 12px;
102+
color: #666;
103+
line-height: 1.4;
104+
}
105+
106+
.feedback-email-link {
107+
color: #f57d20;
108+
text-decoration: none;
109+
border-bottom: 1px solid #f57d20;
110+
font-weight: 500;
111+
}
112+
113+
.feedback-icon {
114+
flex-shrink: 0;
115+
width: 20px;
116+
height: 20px;
117+
}
118+
119+
58120
.sub-header {
59121
font-size: 18px; /* Adjust the font size */
60122
font-weight: normal; /* Keep it lighter than the title */
@@ -82,14 +144,11 @@ body {
82144
line-height: 24px;
83145
}
84146

85-
/* Summary text aligned to the left */
86147
summary {
87-
display: block; /* Keep header layout unchanged */
88-
text-align: left;
89-
width: 100%;
90-
cursor: pointer;
91-
position: relative; /* Needed for absolute caret */
92-
padding-right: 32px; /* Reserve space so subhead never overlaps caret */
148+
/* font-size: 18px; */
149+
letter-spacing: 0.25px;
150+
padding: 10px 0px;
151+
/* font-weight: bold; */
93152
}
94153

95154
.collapseListTierOne {
@@ -101,29 +160,6 @@ body {
101160
}
102161
/* NEED TO FIX THE CHILD TEXT INDENTION */
103162

104-
.collapseListH2 {
105-
/* margin-left: 10px;
106-
margin-right: 10px; */
107-
font-size: 20px;
108-
font-weight: bold;
109-
padding: 16px 0px;
110-
}
111-
112-
.collapseListH2 .collapseSubhead {
113-
display: block;
114-
margin-top: 12px;
115-
font-weight: 400;
116-
font-size: 14px;
117-
line-height: 1.4;
118-
/* color: #6b7280; */
119-
}
120-
121-
/* Guarantee sub-header is on its own line and respects caret space */
122-
summary .collapseSubhead {
123-
display: block;
124-
padding-right: 32px; /* mirror summary padding-right to keep clear of caret */
125-
}
126-
127163
.collapseListTierTwo {
128164
font-size: 16px;
129165
font-weight: bold;
@@ -294,51 +330,36 @@ body {
294330
}
295331

296332
/* Summary text aligned to the left */
297-
/* Removed old summary rule, replaced above */
333+
summary {
334+
display: inline-block;
335+
text-align: left;
336+
width: 100%;
337+
cursor: pointer;
338+
position: relative;
339+
padding-right: 25px; /* Add padding for the caret */
340+
}
298341

299342
/* Remove default caret */
300343
summary::marker {
301344
content: '';
302345
}
303346

304-
/* Custom caret, default state (always visible) */
347+
/* Custom caret, default state */
305348
summary::after {
306-
font-family: "Font Awesome 5 Free";
307-
font-weight: 900; /* solid style */
308-
content: "\f078"; /* chevron-down */
349+
/* content: '▼'; Custom caret symbol */
350+
font-family: "Font Awesome 5 Free"; /* Specify FontAwesome */
351+
content: "\f078"; /* FontAwesome chevron-down unicode */
309352
font-size: 16px;
310353
position: absolute;
311-
right: 0; /* Pin to the far right */
354+
right: 0;
312355
top: 50%;
313-
transform: translateY(-50%) rotate(0deg);
314-
transition: transform 0.3s ease;
315-
pointer-events: none; /* Clicks still toggle summary */
356+
transform: translateY(-50%);
357+
transition: transform 0.3s ease; /* Smooth transition for rotation */
316358
}
317359

318360
/* Rotate caret when details is open */
319361
details[open] summary::after {
320-
transform: translateY(-50%) rotate(180deg);
321-
}
322-
323-
/* Align caret with the header line (not the combined header + subhead block) */
324-
summary.collapseListH2::after {
325-
top: 1.1em; /* relative to header font-size; avoids subhead overlap */
326-
transform: rotate(0deg);
327-
}
328-
329-
details[open] summary.collapseListH2::after {
330-
top: 1.1em;
331-
transform: rotate(180deg);
332-
}
333-
334-
summary.collapseListTierOne::after {
335-
top: 1em; /* smaller header size */
336-
transform: rotate(0deg);
337-
}
338-
339-
details[open] summary.collapseListTierOne::after {
340-
top: 1em;
341-
transform: rotate(180deg);
362+
transform: translateY(-50%) rotate(180deg); /* Rotate caret when open */
342363
}
343364

344365
/* Styling for Create Your Account CTA */

‎documentation‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Subproject commit 6b663bc4022b5356e22c4d0c26a3d9da64ed9937

0 commit comments

Comments
 (0)