E-Book by Glide. I tried to represent the new button bar with a small circle for page transitions

Hi! All gliders.
Can you tell me one?

I wanted to display the Button Bar in a small circle.
I’m getting closer to my goal, but the code isn’t beautiful.
I seem to need the help of a CSS magician.

<pre><span><style>
.sc-bTJPMs.jrgmBT {
margin-top:-1%!important;
margin-left:35%!important;
width:105px !important;
}
[data-test="app-button-view"]  {
border-radius: 50% !important;
}
2 Likes

@ThinhDinh @Lucas_Pires @Robert_Petitto are the CSS Experts.

2 Likes

Yes, I know.
I am now waiting for the arrival of three musketeers.

5 Likes

@hisashi.fujita if you want to go the long way you can use an inline list and use some relevant images with e,g. Ratio 2:1.

Sounds as you are willing to use css (which I’m not into) so easier to wait for the css experts :sunglasses:

Inspiration here:

2 Likes

Thank you @Krivo.

My purpose is to realize a button with Prev / Next function.
In the new button bar, we have adopted it because we can give each action to two buttons.
And I’m trying to make the button small and unobtrusive.

1 Like

I had a look at this, but can’t seem to have a way around the class name. Not sure if anyone can figure out the class name for the button bar, would highly appreciate it. Looks like there’s only the class name for me.

The button bar doesn’t have a named class yet.
Screen Shot 2021-01-21 at 10.26.34 AM

1 Like

app-button-view doesn’t work?

That’s for the button itself but not the bar

2 Likes

Right, just figured that might be enough to change a button shape. Haven’t tried it. Just spit-ballin.

2 Likes

Thanks ThinhDinh, Robert_Petitto, Jeff_Hager.
I have to wait for a named class, right?
I will try again when the class name is set.

2 Likes

I tried to express the new button bar with a small circle.
Only one character should be used.
With the help of ThinhDinh, we have achieved page transitions with Prev / Next.
Once the class name is set, I think we can decorate it more.

<pre><span><style>
.sc-bTJPMs.jrgmBT {
margin-top: -1% !important;
margin-left: 36% !important;
width:28% !important;
}
[data-test="app-button-view"]  {
border: 1px solid #ccc !important;
color: #ccc !important;
border-radius:50%;
}
4 Likes

@hisashi.fujita do you have any inspiration to decorate your buttons for?

Based on your inspirations we can achieve it

I tested the app now, and it’s cool yet

1 Like

I am aiming to create an e-book using glide.
Being able to upload manuscripts such as text and images from apps and G spreadsheets is very appealing to administrators.
Previous / next page transition for that is a very important feature.

Currently, pages are laid out with CSS that allows you to build complex structures.
We are waiting for the day when we can create a magazine screen with only the basic functions of Glide without using CSS.

1 Like

I made some modifications.

★ Prev / Next function with button bar.
★ Page transition directly with the choice component.

3 Likes

Very nice app. Creative homepage. Just an observation… how come the direct choice component has a “-“ as an option? Pressing the minus sign produces some strange on screen behavior.

Perhaps mark the component as “required”?

5 Likes

Eric_Penn Thanks for checking my app.
Your advice is correct.

★ The Choice item has been changed to the “required” state.
★ The tab at the bottom is hidden to make the UI of the app cleaner.

3 Likes

@hisashi.fujita very nice looking app :+1:
How much css did you have to do to obtain the layout?

The page layout part uses a lot of CSS, as much as a regular HTML page.
So why use glide? You might think that.
It is mainly due to the following reasons.

★ Anyone can easily change the contents with a spreadsheet.
★ And glide is PWA.

So for now, glide is the best choice for me.

3 Likes

Would love to see the css behind for both the titles in the top right of every image and off course the buttons and choice component moving between pages

1 Like