Skip to content

Commit 5632074

Browse files
Daniel WDaniel W
Daniel W
authored and
Daniel W
committed
fix: modal and theme settings
also use the correct repo in readme and refactor html code in docs for modals
1 parent 73132f2 commit 5632074

7 files changed

Lines changed: 229 additions & 268 deletions

File tree

‎README.md‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,37 @@
11
## Requirements
2+
23
This project uses pnpm with workspaces. So pnpm [should be installed](https://pnpm.io/installation).
34

45
## Project generation
5-
This project has been generated from with a ``$ pnpm create vite`` command and selecting the vanilla-ts project.
66

7-
[Materialize](https://github.com/materializecss/materialize) has been added as a git submodule in packages folder and then defined as a [pnpm workspace](https://pnpm.io/workspaces), to use it as a monorepo.
7+
This project has been generated from with a `$ pnpm create vite` command and selecting the vanilla-ts project.
8+
9+
[Materialize](https://github.com/materializecss/materialize) has been added as a git submodule in packages folder and then defined as a [pnpm workspace](https://pnpm.io/workspaces), to use it as a monorepo.
810

911
Typescript has been configured to treat all projects in /packages folder as typescript packages.
1012

1113
head, navbar and footer in all html pages has been defined using [vite-plugin-handlebars](https://github.com/alexlafroscia/vite-plugin-handlebars).
1214

1315
## Instructions to develop
16+
1417
```
15-
git clone https://github.com/danice/materialize-docs-vite.git
16-
cd materialize-docs-vite
18+
git clone https://github.com/materializecss/materialize-docs.git
19+
cd materialize-docs
1720
git submodule init
1821
git submodule update
1922
pnpm install
2023
pnpm dev
2124
```
25+
2226
This is a very convenient way to work in materialize or docs because all changes in both projects are inmediately displayed in the browser.
2327

24-
Also browser debugging displays the files exactly as they are in the source.
28+
Also browser debugging displays the files exactly as they are in the source.
2529

2630
Note: when a new page is selected it takes some time to render completely the page. This not happens in the build version.
2731

28-
2932
## Instructions to build site
33+
3034
```
3135
pnpm build
3236
pnpm preview
3337
```
34-
35-

‎demo-page.html‎

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,62 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Test</title>
7+
<script>
8+
function toggleTheme() {
9+
const prefersColorSchemeDark = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
10+
const state = localStorage.getItem("theme") || prefersColorSchemeDark;
11+
const newState = state === "light" ? "dark" : "light";
12+
localStorage.setItem("theme", newState);
13+
document.documentElement.setAttribute("theme", newState);
14+
}
15+
</script>
716
</head>
817
<body>
9-
<h1>Test</h1>
18+
<main class="container">
19+
<h1>Test</h1>
20+
<p>
21+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet nobis odit officiis officia optio nam id corporis! Consequatur, hic minima porro totam, quidem et
22+
laboriosam neque vitae voluptatibus, maxime laborum. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit rerum pariatur sed omnis quam iusto adipisci eveniet.
23+
Incidunt eaque a alias, voluptas illum sequi, exercitationem, obcaecati excepturi accusantium voluptate hic. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
24+
Quisquam consectetur ab a obcaecati? Exercitationem dolore incidunt, fuga corporis distinctio harum vitae iure consectetur odio eaque. Voluptatem quod provident totam
25+
nihil? Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis quo quia eum a! Minima nulla ex nisi id error temporibus! Omnis a quibusdam eaque itaque
26+
asperiores odit quasi at quis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia ullam sapiente autem, earum, quas ea, quam cupiditate illo laudantium ratione
27+
voluptatem culpa commodi iure dicta! Animi, eaque optio! Reprehenderit, voluptatibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Error velit in veritatis
28+
ducimus quod molestiae at deserunt beatae nam ad perferendis sed quibusdam fugiat necessitatibus amet, natus vero! Labore, nobis? Lorem ipsum dolor sit amet consectetur
29+
adipisicing elit. Recusandae veniam, quaerat ab expedita necessitatibus, distinctio sequi itaque quibusdam sint sit, magnam excepturi. Provident commodi repellendus,
30+
asperiores nihil similique minima voluptas.
31+
</p>
32+
<button onclick="toggleTheme()">Toggle Theme</button>
33+
<br />
34+
<p class="error-text">This is an Error</p>
35+
36+
<p>
37+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, nihil ut explicabo provident aut, nisi sint atque fugiat aliquid nam tenetur beatae debitis dolore nemo,
38+
consequatur natus temporibus vitae cum.
39+
</p>
40+
<div class="divider"></div>
41+
<p>
42+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere exercitationem aperiam nostrum corrupti. Soluta cum alias, assumenda dolorem perspiciatis mollitia aliquam
43+
nemo amet corporis, sapiente dignissimos. Quas voluptatibus sunt a!
44+
</p>
45+
46+
<!-- Modal Trigger -->
47+
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
48+
<!-- Modal Structure -->
49+
<div id="modal1" class="modal modal-fixed-footer">
50+
<div class="modal-content">
51+
<h4>Desicion</h4>
52+
<p>
53+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus dolores sapiente, dolorum minus amet vel distinctio obcaecati, quod porro esse sit excepturi
54+
repellat odio exercitationem. Earum nihil eligendi facere voluptatibus.
55+
</p>
56+
</div>
57+
<div class="modal-footer">
58+
<a href="#!" class="modal-close waves-effect btn-flat">Disagree</a>
59+
<a href="#!" class="modal-close waves-effect btn-flat">Agree</a>
60+
</div>
61+
</div>
62+
</main>
63+
<script type="module" src="/src/main.ts"></script>
1064
</body>
1165
</html>

0 commit comments

Comments
 (0)