[ticket/12155] Construct post buttons using CSS. by prototech · Pull Request #2469 · phpbb/phpbb

prototech · 2014-05-16T11:28:14Z

https://tracker.phpbb.com/browse/PHPBB3-12155
https://tracker.phpbb.com/browse/PHPBB3-12548

rxu · 2014-05-16T15:28:42Z

Looks nice (tested locally). Would be great to get it merged into 3.1.

bantu · 2014-05-17T13:56:15Z

Is this still work in progress?

prototech · 2014-05-17T14:33:46Z

Should be good to go now.

Nicofuma · 2014-05-17T14:38:20Z

looks nice

PayBas · 2014-05-19T07:11:01Z

phpBB/styles/prosilver/theme/buttons.css

0.8s feels very slow, perhaps something like 0.5s?

bantu · 2014-05-23T01:34:46Z

@VSEphpbb Could you review the CSS please.

iMattPro · 2014-05-23T02:06:56Z

phpBB/styles/prosilver/theme/buttons.css

If breaking up selectors onto multiple lines, I would put one selector per line

iMattPro · 2014-05-23T02:21:20Z

The CSS changes in this PR seems to mess up the Notifications drop down.

before changes:

after changes:

iMattPro · 2014-05-23T02:34:59Z

In PM's drop down tools, text (ie: Print view) is too small. In posts/viewtopic, drop down tool text is 11px, but in PMs, text is 10px. So PM tool menu font size is being over-ridden somewhere

nickvergessen · 2014-05-23T08:23:59Z

Big buttons use {L_BUTTON_PM_NEW} small ones {L_REPORT_POST}
Since we don't support IE7 and below anymore: Can we get rid of the span or use it the same way (text) everywhere?

nickvergessen · 2014-05-23T08:30:05Z

Don't know if it is possible, but I'd like to see the buttons image-class moved to the <a>-Tag.
So instead of

        <div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->">
            <a href="proxy.php?url=https%3A%2F%2Fgithub.com%2F%7BU_POST_REPLY_TOPIC%7D" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->" class="button icon-button">
                <span></span><!-- IF S_IS_LOCKED -->{L_BUTTON_TOPIC_LOCKED}<!-- ELSE -->{L_BUTTON_POST_REPLY}<!-- ENDIF -->
            </a>
        </div>

In the best case, we would have:

        <a href="proxy.php?url=https%3A%2F%2Fgithub.com%2F%7BU_POST_REPLY_TOPIC%7D" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->" class="button icon-button <!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->">
            <!-- IF S_IS_LOCKED -->{L_BUTTON_TOPIC_LOCKED}<!-- ELSE -->{L_BUTTON_POST_REPLY}<!-- ENDIF -->
        </a>

So you can make a simple <a href="proxy.php?url=https%3A%2F%2Fgithub.com%2F"> look like a button.

But this might also be a task for a new PR

nickvergessen · 2014-05-26T16:30:36Z

@prototech please post, when this is ready for merge

Created a css version of the mini post buttons with the use of language vars and no fixed width of height. PHPBB3-12155

PHPBB3-12155

…ttons. PHPBB3-12155

PHPBB3-12155

…w it. PHPBB3-12155

…e paths. PHPBB3-12155

… too long PHPBB3-12155

This was in place for IE7 due to the use of :after for inserting the button icon. IE7 does not support :after, so the hack removed the extra padding that made room for the icon. We no longer use :after for the icon, so this is no longer an issue... not to mention that IE7 is no longer supported. PHPBB3-12155

…ently. PHPBB3-12155

…le sprite PHPBB3-12155

…on works. PHPBB3-12155

…n Safari. PHPBB3-12155

…in FF. PHPBB3-12155

…re at it. PHPBB3-12155

…o .button PHPBB3-12155

[ticket/12155] Construct post buttons using CSS. * prototech/ticket/12155: (21 commits) [ticket/12155] Remove use of !important and move reddish color back to .button [ticket/12155] Reposition the button icons to the left side while we're at it. [ticket/12155] Get rid of line-height value causing alignment issues in FF. [ticket/12155] Get rid of the where possible and fix buttons in Safari. [ticket/12155] Fix misplaced semicolon and ensure that value comparison works. [ticket/12155] Combine the post and topic/PM button icons into a single sprite [ticket/12155] Move icon class directly to <a> and use consistently. [ticket/12155] Remove star hack from padding-right property of .button. [ticket/12155] Fix tabbing and put one selector per line if string is too long [ticket/12155] Make opacity transition faster and fix background image paths. [ticket/12155] Keep the selection method consistent with the one below it. [ticket/12155] Fade out the buttons when leaving the post. [ticket/12155] Display the buttons only when hovering the post. [ticket/12155] Make the buttons bigger on touch devices. [ticket/12155] Clean up icons. [ticket/12155] Remove unused font. [ticket/12155] Remove obsolete images. [ticket/12155] Use the new .button class as the basis for the post buttons. [ticket/12155] Move existing button style to a more generic class. [ticket/12155] Remove obsolete language images. ...

bantu · 2014-05-27T16:41:11Z

I have verified that phpBB/styles/prosilver/theme/images/icons_button.png which is the only image that is getting added here, does not contain an ICC profile. Ref #2498

[ticket/12155] Construct post buttons using CSS. * prototech/ticket/12155: (21 commits) [ticket/12155] Remove use of !important and move reddish color back to .button [ticket/12155] Reposition the button icons to the left side while we're at it. [ticket/12155] Get rid of line-height value causing alignment issues in FF. [ticket/12155] Get rid of the where possible and fix buttons in Safari. [ticket/12155] Fix misplaced semicolon and ensure that value comparison works. [ticket/12155] Combine the post and topic/PM button icons into a single sprite [ticket/12155] Move icon class directly to <a> and use consistently. [ticket/12155] Remove star hack from padding-right property of .button. [ticket/12155] Fix tabbing and put one selector per line if string is too long [ticket/12155] Make opacity transition faster and fix background image paths. [ticket/12155] Keep the selection method consistent with the one below it. [ticket/12155] Fade out the buttons when leaving the post. [ticket/12155] Display the buttons only when hovering the post. [ticket/12155] Make the buttons bigger on touch devices. [ticket/12155] Clean up icons. [ticket/12155] Remove unused font. [ticket/12155] Remove obsolete images. [ticket/12155] Use the new .button class as the basis for the post buttons. [ticket/12155] Move existing button style to a more generic class. [ticket/12155] Remove obsolete language images. ...

bantu · 2014-05-27T16:43:21Z

Great work. :-)

Rebased after phpbb#2469 PHPBB3-12598

prototech mentioned this pull request May 16, 2014

Ticket/12155 CSS-ing mini post buttons #2005

Closed

bantu mentioned this pull request May 16, 2014

Updates für Grafiken phpbb-de/phpbb-translation#58

Merged

prototech changed the title ~~[WIP] [ticket/12155] Construct post buttons using CSS.~~ [ticket/12155] Construct post buttons using CSS. May 17, 2014

PayBas reviewed May 19, 2014
View reviewed changes

iMattPro reviewed May 23, 2014
View reviewed changes

neufke and others added 9 commits May 27, 2014 07:17

[ticket/12155] CSS-ing of the mini post buttons

aeb7803

Created a css version of the mini post buttons with the use of language vars and no fixed width of height. PHPBB3-12155

[ticket/12155] Remove obsolete language images.

03d3762

PHPBB3-12155

[ticket/12155] Move existing button style to a more generic class.

00ff33c

PHPBB3-12155

[ticket/12155] Use the new .button class as the basis for the post bu…

d3b9c87

…ttons. PHPBB3-12155

[ticket/12155] Remove obsolete images.

673087d

PHPBB3-12155

[ticket/12155] Remove unused font.

f31f1dc

PHPBB3-12155

[ticket/12155] Clean up icons.

84fd965

PHPBB3-12155

[ticket/12155] Make the buttons bigger on touch devices.

3106306

PHPBB3-12155

[ticket/12155] Display the buttons only when hovering the post.

cba58fe

PHPBB3-12155

prototech added 12 commits May 27, 2014 07:17

[ticket/12155] Fade out the buttons when leaving the post.

c521fc2

PHPBB3-12155

[ticket/12155] Keep the selection method consistent with the one belo…

c0c42de

…w it. PHPBB3-12155

[ticket/12155] Make opacity transition faster and fix background imag…

74afe4a

…e paths. PHPBB3-12155

[ticket/12155] Fix tabbing and put one selector per line if string is…

7f2c386

… too long PHPBB3-12155

[ticket/12155] Move icon class directly to <a> and use consist…

70f9d4a

…ently. PHPBB3-12155

[ticket/12155] Combine the post and topic/PM button icons into a sing…

7c3af55

…le sprite PHPBB3-12155

[ticket/12155] Fix misplaced semicolon and ensure that value comparis…

dff6741

…on works. PHPBB3-12155

[ticket/12155] Get rid of the where possible and fix buttons i…

4d60583

…n Safari. PHPBB3-12155

[ticket/12155] Get rid of line-height value causing alignment issues …

aad195a

…in FF. PHPBB3-12155

[ticket/12155] Reposition the button icons to the left side while we'…

ee9b99c

…re at it. PHPBB3-12155

[ticket/12155] Remove use of !important and move reddish color back t…

7518648

…o .button PHPBB3-12155

bantu merged commit 7518648 into phpbb:develop-ascraeus May 27, 2014

PayBas added a commit to PayBas/phpbb that referenced this pull request May 27, 2014

[ticket/12598] Change predefined searches to drop-down menu

c3e875c

Rebased after phpbb#2469 PHPBB3-12598

PayBas mentioned this pull request Jun 1, 2014

[ticket/12013] Use new dropdown for quickmod tools and jumpbox. #1864

Merged

1 task

PayBas added a commit to PayBas/phpbb that referenced this pull request Jun 5, 2014

[ticket/12598] Change predefined searches to drop-down menu

4da429a

Rebased after phpbb#2469 PHPBB3-12598

PayBas added a commit to PayBas/phpbb that referenced this pull request Jun 10, 2014

[ticket/12598] Change predefined searches to drop-down menu

3e6bc7d

Rebased after phpbb#2469 PHPBB3-12598

PayBas added a commit to PayBas/phpbb that referenced this pull request Jun 15, 2014

[ticket/12598] Change predefined searches to drop-down menu

b925827

Rebased after phpbb#2469 PHPBB3-12598

prototech deleted the ticket/12155 branch June 21, 2014 04:26

Uh oh!

Conversation

prototech commented May 16, 2014

Uh oh!

rxu commented May 16, 2014

Uh oh!

bantu commented May 17, 2014

Uh oh!

prototech commented May 17, 2014

Uh oh!

Nicofuma commented May 17, 2014

Uh oh!

PayBas May 19, 2014

Choose a reason for hiding this comment

Uh oh!

prototech May 21, 2014

Choose a reason for hiding this comment

Uh oh!

bantu commented May 23, 2014

Uh oh!

iMattPro May 23, 2014

Choose a reason for hiding this comment

Uh oh!

prototech May 23, 2014

Choose a reason for hiding this comment

Uh oh!

iMattPro commented May 23, 2014

Uh oh!

iMattPro commented May 23, 2014

Uh oh!

nickvergessen commented May 23, 2014

Uh oh!

nickvergessen commented May 23, 2014

Uh oh!

nickvergessen commented May 26, 2014

Uh oh!

bantu commented May 27, 2014

Uh oh!

bantu commented May 27, 2014

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants