Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature #158773 chore: Rating Field in TjUcm #363

Open
wants to merge 5 commits into
base: release-1.2.4
Choose a base branch
from
+67 −4
Open

Feature #158773 chore: Rating Field in TjUcm #363

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7acb3f1
Feature #158773 chore: Rating Field in TjUcm
prvnpuri Mar 12, 2020
6a44d9a
Feature #163832 chore: Implement Multiple Copy feature on the fronten…
shraddhaSankpal27 Aug 17, 2020
de8fb89
Feature #163832 chore: Implement Multiple Copy feature on the fronten…
shraddhaSankpal27 Aug 17, 2020
3337d46
Feature #158773 chore: Rating Field in TjUcm
shraddhaSankpal27 Aug 25, 2020
cfbe468
Feature #158773 chore: Rating Field in TjUcm
shraddhaSankpal27 Aug 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 63 additions & 0 deletions src/components/com_tjucm/media/css/tjucm.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,66 @@ width:200px !important;
.tjucm-wrapper .tj-wordwrap{
word-break: break-word;
}

/****** Style Star Rating Widget *****/
fieldset, label { margin: 0; padding: 0; }
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shraddhaSankpal27 direct CSS for bootstrap classes are not recommended, use UCM wrapper class with the CSS class.

e.g .ucm-wrapper .label{
CSS
}

Again, this can cause issues in other fields label and ieldsets. We should not write CSS for generic classes of bootstrap. The input and label should use template CSS only

Copy link
Author

@shraddhaSankpal27 shraddhaSankpal27 Mar 12, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ankush-maherwal I'll update with help of designer

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ankush-maherwal @shraddha : Update the generic css for rating and also rating star use
images that will good option.

body{ margin: 20px; }
h1 { font-size: 1.5em; margin: 10px; }

.rating {
border: none;
float: left;
}

.rating > input { display: none; }
.rating > label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
position: relative;
}

.rating.heart > label:before {
content: "\f004";
}

.rating > .half:before {
content: "\f089";
position: absolute;
}

.rating.heart > .half:before {
content: "\f08a";
position: absolute;
}

.rating > label {
color: #ddd;
float: right;
}

.rating > label:empty{
display:block !important;
}
/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85; }

/****** Css implementad for Detail view ******/

.rating.nohover:not(:checked) > label:hover, /* hover current star */
.rating.nohover:not(:checked) > label:hover ~ label { color: #ddd; } /* hover previous stars in list */

.rating.nohover > input:checked + label:hover, /* hover current star when changing rating */
.rating.nohover > input:checked ~ label:hover,
.rating.nohover > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating.nohover > input:checked ~ label:hover ~ label { color: #FFD700; }
1 change: 1 addition & 0 deletions src/components/com_tjucm/site/layouts/detail/fields.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
$fieldLayout['Subform'] = "subform";
$fieldLayout['Ownership'] = "ownership";
$fieldLayout['Editor'] = "editor";
$fieldLayout['rating'] = "rating";

// Load the tj-fields helper
JLoader::import('components.com_tjfields.helpers.tjfields', JPATH_SITE);
Expand Down