Skip to content

Commit

Permalink
refactor page styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@webloopbox
webloopbox committed Oct 23, 2024
1 parent 8dfc28c commit 7c89b37
Show file tree
Hide file tree
Showing 6 changed files with 31 additions and 25 deletions.
21 changes: 7 additions & 14 deletions website/app/support/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,19 @@

import Link from "next/link";
import { MdQuestionMark, MdPerson, MdOutlineBugReport } from "react-icons/md";
import { useIsScreenWidthLessThan } from "@/hooks/useIsScreenWidthLessThan";
import { Shape1, Shape2 } from "@/components/bg-shapes";

export default function FeaturesPage() {
const shouldHideNumbers = useIsScreenWidthLessThan(780);

return (
<div className="z-1">
<>
<div
className={`absolute z-0 w-[50%] top-[50px] left-[-20%] ${
shouldHideNumbers ? "hidden" : "visible"
}`}
className={`absolute z-0 w-[50%] top-[50px] left-[-20%] hidden lg:block`}
>
<Shape1 />
</div>
<div
className={`absolute z-0 w-[50%] top-[200px] right-[-20%] ${
shouldHideNumbers ? "hidden" : "visible"
}`}
className={`absolute z-0 w-[50%] top-[200px] right-[-20%] hidden lg:block`}
>
<Shape2 />
</div>
Expand All @@ -32,14 +25,14 @@ export default function FeaturesPage() {
<h1 className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-xl md:text-2xl font-bold text-center text-green-primary px-4">
Need support?
</h1>
<p className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-black-secondary text-center text-xs md:text-sm px-4">
<p className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-black-secondary text-center text-xs md:text-sm px-4 font-bold">
If you have any inquiries or need assistance, our team is here to
help.
</p>
</div>
<div className="grid grid-cols-main md:pb-[250px] pt-8 md:pt-0">
<div className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-black-secondary flex gap-x-16 mb-[128px] justify-center flex-col md:flex-row px-4">
<div className="flex-1 flex flex-col items-center justify-start">
<div className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-black-secondary flex gap-x-4 2xl:gap-x-16 mb-[128px] justify-center flex-col md:flex-row px-4">
<div className="flex-1 flex flex-col items-center justify-start bg-[white] border p-4">
<MdQuestionMark size={120} color="#107c41" />
<h3 className="text-center font-bold">Got questions?</h3>
<p className="mt-4 text-center">
Expand All @@ -54,7 +47,7 @@ export default function FeaturesPage() {
page
</p>
</div>
<div className="flex-1 flex flex-col items-center justify-start pt-8 md:pt-0">
<div className="flex-1 flex flex-col items-center justify-start pt-8 md:pt-0 bg-[white] border p-4 mt-8 md:mt-0">
<MdPerson size={120} color="#107c41" />
<h3 className="text-center font-bold">
Need talented developers?
Expand All @@ -64,7 +57,7 @@ export default function FeaturesPage() {
your product.
</p>
</div>
<div className="flex-1 flex flex-col items-center justify-start pt-8 md:pt-0">
<div className="flex-1 flex flex-col items-center justify-start pt-8 md:pt-0 bg-[white] border p-4 mt-8 md:mt-0">
<MdOutlineBugReport size={120} color="#107c41" />
<h3 className="text-center font-bold">Technical issues?</h3>
<p className="mt-4 text-center">
Expand Down
4 changes: 2 additions & 2 deletions website/components/bg-shapes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const Shape1 = () => {
"#s1-blob1",
{ path: "#s1-blob1" },
{ path: "#s1-blob2" },
{ duration: 3500, yoyo: true, repeat: 999 }
{ duration: 3500, yoyo: true, repeat: 100 }
);

tween1.start();
Expand Down Expand Up @@ -49,7 +49,7 @@ const Shape2 = () => {
"#s2-blob1",
{ path: "#s2-blob1" },
{ path: "#s2-blob2" },
{ duration: 3500, yoyo: true, repeat: 999 }
{ duration: 3500, yoyo: true, repeat: 100 }
);

tween1.start();
Expand Down
6 changes: 3 additions & 3 deletions website/components/footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export const Footer = () => {
<h2 className="font-bold text-green-primary text-sm mb-4 md:mb-[32px]">
Info
</h2>
<ul className="text-white-secondary3 flex flex-col gap-y-2">
<ul className="text-white-secondary3 flex flex-col gap-y-2 font-bold">
{/* <Link href="/cookies">Cookies</Link> */}
<Link href="/privacy-policy">Privacy Policy</Link>
</ul>
Expand All @@ -20,7 +20,7 @@ export const Footer = () => {
<h2 className="font-bold text-green-primary text-sm mb-4 md:mb-[32px]">
Explore
</h2>
<ul className="text-white-secondary3 flex flex-col gap-y-2">
<ul className="text-white-secondary3 flex flex-col gap-y-2 font-bold">
<li>
<Link href="/demo">Demo</Link>
</li>
Expand Down Expand Up @@ -60,7 +60,7 @@ export const Footer = () => {
<h2 className="font-bold text-green-primary text-sm mb-4 md:mb-[32px]">
Contact
</h2>
<ul className="text-white-secondary3 flex flex-col gap-y-2">
<ul className="text-white-secondary3 flex flex-col gap-y-2 font-bold">
<li>Silevis Software Sp. z o.o.</li>
<li>Sienkiewicza Street 17/3</li>
<li>25-007 Kielce, Poland</li>
Expand Down
25 changes: 19 additions & 6 deletions website/pages/docs/5.0/1-getting-started.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ In this guide, we're going to build a very simple React App, which will make use
#### NPM Install

```shell
npm i @silevis/reactgrid
npm i @silevis/reactgrid@5.0.0-alpha.2
```

Unlike previous versions, there's no longer a need to import the CSS file separately.
Expand All @@ -21,9 +21,22 @@ Unlike previous versions, there's no longer a need to import the CSS file separa

To integrate ReactGrid into your application, configure the grid using [rows](/docs/5.0/6-api/1-types/1-row), [columns](/docs/5.0/6-api/1-types/2-column), and [cells](/docs/5.0/6-api/1-types/3-cell). However, if you provide only [cells](/docs/5.0/6-api/1-types/3-cell) with specified `rowIndex` and `colIndex`, the rows and columns will be automatically generated. If you want to define specific row heights, column widths or row and column reordering, you should pass them explicitly to the ReactGrid component. Below is a detailed breakdown of how to set this up, including an example configuration file.

### Configure ReactGrid inside your application
#### Understanding the Workflow

Let's create a simple example including the aggregation:
Let's create a simple example including the aggregation. The values of the cells in the **Sum** row and **Total** column will be automatically calculated from the values entered into the cells in the **H1** and **H1** columns.

<div style={{ marginTop: 25, display: "flex", justifyContent: "center" }}>
<img src="/reactgrid/static/workflow-table-1.png" />
</div>
---

To achieve this, we will need an array of [cells](/docs/5.0/6-api/1-types/3-cell) with defined indices, a template, and props. Once we have created all the necessary cells to build the example above, we can pass them to the ReactGrid component.

<div style={{ marginTop: 25, display: "flex", justifyContent: "center" }}>
<img src="/reactgrid/static/workflow-table-2.png" />
</div>

### Live implementation

---

Expand Down Expand Up @@ -73,7 +86,7 @@ const createYearDataRow = (rowIndex: number, year: Year, setYearsData) => {
},
};
const isTotalCell = (colIndex: number) => colIndex === year.values.length - 1; // last column is the total
const isTotalCell = (colIndex: number) => colIndex === year.values.length - 1;
const yearValueCells = year.values.map((value, colIndex) => {
const isEditable = year.label !== "Sum" && !isTotalCell(colIndex);
Expand Down Expand Up @@ -141,11 +154,11 @@ const addTotalValues = (years: Year[]) => {
const initialYearData: Year[] = [
{
label: "2023",
values: new Array(2).fill(0).map(() => Math.floor(Math.random() * 9) + 1), // e.g. [1, 3]
values: new Array(2).fill(0).map(() => Math.floor(Math.random() * 9) + 1),
},
{
label: "2024",
values: new Array(2).fill(0).map(() => Math.floor(Math.random() * 9) + 1), // e.g. [2, 4]
values: new Array(2).fill(0).map(() => Math.floor(Math.random() * 9) + 1),
},
];
Expand Down
Binary file added website/public/static/workflow-table-1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/public/static/workflow-table-2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 7c89b37

Please sign in to comment.