Skip to content

Commit 60a05af

Browse files
SandaruRFSandaruRF
committed
Add Report Issues button with theme-aware styling
1 parent 8212293 commit 60a05af

File tree

3 files changed

+124
-0
lines changed

3 files changed

+124
-0
lines changed

‎en/theme/material/assets/css/report-issues.css‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
/*
2+
* Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
3+
*
4+
* WSO2 LLC. licenses this file to you under the Apache License,
5+
* Version 2.0 (the "License"); you may not use this file except
6+
* in compliance with the License.
7+
* You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing,
12+
* software distributed under the License is distributed on an
13+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14+
* KIND, either express or implied. See the License for the
15+
* specific language governing permissions and limitations
16+
* under the License.
17+
*/
18+
19+
/* Report Issues Button Styles */
20+
21+
.report-issues-fixed {
22+
position: fixed;
23+
top: 50%;
24+
right: 0;
25+
transform: translateY(-50%);
26+
z-index: 1000;
27+
cursor: pointer;
28+
}
29+
30+
/* Light mode */
31+
.md-button--report-issues {
32+
writing-mode: vertical-rl;
33+
text-orientation: mixed;
34+
border-radius: 8px 0 0 8px;
35+
min-height: 120px;
36+
width: 30px;
37+
padding: 10px 2px;
38+
background: var(--md-default-fg-color);
39+
color: var(--md-default-bg-color);
40+
border: 1px solid var(--md-default-fg-color);
41+
box-shadow: 0 2px 8px var(--md-shadow-z1);
42+
transition: all 0.2s ease;
43+
display: flex;
44+
align-items: center;
45+
justify-content: center;
46+
cursor: pointer;
47+
}
48+
49+
.md-button--report-issues:hover {
50+
background: color-mix(in srgb, var(--md-default-fg-color) 95%, white);
51+
border-color: color-mix(in srgb, var(--md-default-fg-color) 95%, white);
52+
color: var(--md-default-bg-color);
53+
box-shadow: 0 4px 12px var(--md-shadow-z2);
54+
}
55+
56+
.md-button--report-issues .md-header__link__label {
57+
font-size: 12px;
58+
font-weight: 500;
59+
white-space: nowrap;
60+
cursor: pointer;
61+
}
62+
63+
/* Mobile responsive */
64+
@media screen and (max-width: 768px) {
65+
.report-issues-fixed {
66+
right: 10px;
67+
top: auto;
68+
bottom: 20px;
69+
}
70+
71+
.md-button--report-issues {
72+
writing-mode: horizontal-tb;
73+
text-orientation: unset;
74+
padding: 8px 12px;
75+
border-radius: 8px;
76+
min-height: auto;
77+
width: auto;
78+
}
79+
}
80+
81+
/* Dark mode */
82+
[data-md-color-scheme="slate"] .md-button--report-issues {
83+
background: var(--md-default-fg-color);
84+
color: var(--md-default-bg-color);
85+
border-color: var(--md-default-fg-color);
86+
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
87+
}
88+
89+
[data-md-color-scheme="slate"] .md-button--report-issues:hover {
90+
background: color-mix(in srgb, var(--md-default-fg-color) 95%, black);
91+
color: var(--md-default-bg-color);
92+
border-color: color-mix(in srgb, var(--md-default-fg-color) 95%, black);
93+
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
94+
}

‎en/theme/material/partials/header.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,9 @@
114114
<div class="md-header__community">
115115
{% include "partials/community.html" %}
116116
</div>
117+
<div class="md-header__issues">
118+
{% include "partials/report-issues.html" %}
119+
</div>
117120
{% if config.repo_url %}
118121
<div class="md-header__source">
119122
{% include "partials/source.html" %}

‎en/theme/material/partials/report-issues.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!--
2+
* Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
3+
*
4+
* WSO2 LLC. licenses this file to you under the Apache License,
5+
* Version 2.0 (the "License"); you may not use this file except
6+
* in compliance with the License.
7+
* You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing,
12+
* software distributed under the License is distributed on an
13+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14+
* KIND, either express or implied. See the License for the
15+
* specific language governing permissions and limitations
16+
* under the License.
17+
-->
18+
19+
<link rel="stylesheet" href="{{ 'assets/css/report-issues.css' | url }}">
20+
21+
<div class="report-issues-fixed">
22+
<button class="md-typeset md-button md-button--small md-button--flex md-button--report-issues"
23+
onclick="javascript:window.open('https://github.com/wso2/product-is'+'/issues/new?title=Doc%20Feedback:&labels=docs&body=Location%20:%20'+window.location.href)"
24+
title="Report Issues">
25+
<label class="md-header__link__label">Report Issues</label>
26+
</button>
27+
</div>

0 commit comments

Comments
 (0)