►
From YouTube: TTEOT Training Video - S2E20 - jQuery: Bootstrap Extras
Description
Badges? We don't need no badges. I don't have to show you any stinkin badges! But what I will show you are bootstrap badges and labels.
Contents:
0:00 - Title
0:32 - Intro
1:15 - Bootstrap badges & labels
3:51 - An old enhancement
8:02 - The local copy enhancement code
11:00 - Enter the bootstrap badges & labels
13:06 - The result
14:45 - More about bootstrap badge & label classes
16:49 - Wrap Up
Referenced code:
https://wiki.koha-community.org/wiki/JQuery_Library#Show_Local_Copy_Status_in_Staff_Search_Results.2C_Hide_all_others_.28Updated_for_21.11.29
https://www.w3schools.com/bootstrap/bootstrap_badges_labels.asp
Music: https://www.bensound.com
A
You
like
in
in
quahog
staff,
side
or
patron
side
on
the
opec,
but
we're
going
to
talk
about
an
element
that
can
be
used.
Taking
advantage
of
bootstrap,
which
is
part
of
koko
kohai.
The
hokohai
community
has
utilized
bootstrap
that
helps
koha.
I
believe
in
a
lot
of
its
responsiveness
and
working
with
just
laying
out
of
web
pages,
it's
something
that
that's
out
there
and
they've
utilized
it,
and
there
are
a
lot
of
elements
to
bootstrap,
some
that
go
unnoticed
and
so
we'll
highlight.
B
B
B
Is
specifically
written
to
make
pages
more
responsive
so
that
a
page
can
go
from
being
on
a
full
screen
at
a
laptop
computer
or
a
desktop
computer,
and
then
bootstrap
has
all
of
the
css
written
so
that
it's
really
easy.
When
you
look
open
that
same
thing
on
an
ipad
or
a
phone,
bootstrap
is
a
library
of
css
commands
and
that
helps
transition
from
one
size
screen
to
another
and
helps
make
cohort,
responsive
and.
A
We've
had
a
an
enhancement
out
back
when
quahog
started
off
in
version
three
before
they
they
did
the
reversioning,
where
we
collapse
the
the
locations
of
libraries
in
your
search
results
of
libraries
that
are
not
necessarily
the
library
that
you're
from
just
to
help
with
looking
through
the
results
a
little
bit
better
and
to
better
explain
that.
Let
me
go
over
to
our
demo
page
here,
and
this
is.
This
is
a
good
example.
A
B
Yeah,
that's
something
maybe
I
should
we
should
point
out
here-
is
that
if
you
only
have
one
library,
this
enhancement,
the
the
the
big
enhancement
that
christopher
is
showing
off
today
that
that
he's
going
to
demo
the
little
enhancement
in
the
big
enhancement
isn't
really
going
to
be
for
you.
If
you've
only
got
one
library.
A
Oh,
I
should
spot
okay,
so
we
have
a
lot
of
items
here
now.
This
one
doesn't
isn't
necessarily
collapsed,
because
this
is
this
is
our
particular
library
that
has
a
lot
of
these
items,
but
if
I
had
a
lot
of
results
with
that
much
in
there
I'd
be
scrolling
and
scrolling
and
scrolling
just
to
get
through
the
page.
If
I
was
looking
through
all
the
results
of
all
these
libraries,
but
because
of
this
you
know,
here's
here's,
an
item
that
has
this
collapsed.
A
B
I
remember
when
this
enhancement
first
came
out.
The
big
deal
was
harry
potter
yeah,
because
you
know
the
harry
potter
number
seven
had
just
come
out,
and
so,
when
you
do
a
search
for
harry
potter,
the
the
results
page
in
quahog
could
be
like
50
feet
tall
because
it
was
showing
you
in
that
right
hand,
column.
It
was
showing
all
of
the
individual
items
at
each
library
and
when
you've
got
48.50
libraries,
there
would
be
a
lot
of
things
in
that
right-hand
column.
B
A
A
We
we're
currently
in
2105
and
we're
getting
ready
for
211,
and
it
got
on
our
radars
that
this
particular
jquery
enhancement
broke
and
jason
learned
that
a
selector
had
changed
in
in
the
code,
and
so
he
did
some
updating
and
posted
that
and
we'll
have
this
we'll
have
this
link
in
here
so
that
you
can
see
this,
but
he's
got
the
update
on
the
jquery
library
and
I'm
going
to
simply
copy
it.
So
the
original
one
was
listed
for
version
314
and
it
stayed
that
way.
A
A
A
And
it
will
say
no
local
copies
on
here
right.
If
I
want
to
look
at
them,
I
can
click
on
the
section
where
it
says
show
all
and
it
will
expand
and
show
me
those
copies.
If
I
wanted
to
see
where,
where
it
is
right
or
I
can
click
on
the
item
and
go
up
straight
into
the
record,
but
for
the
most
part,
the
only
items
that
I'm
seeing
are
copies.
B
B
A
Okay,
I'd
like
to
dress
us
up
a
little
bit.
You
know
you
know,
jason
did
a
fine
job
with
this,
and
you
know
the
no
local
copy
stands
out,
but
I've
made
some
adjustments
to
our
coho,
both
on
the
staff
and
the
in
the
public
side
to
make
some
things
stand
out
a
little
bit
better
and
look
a
little
bit
more
snazzy
or
professional
looking.
A
So
I
I
wanted
to
kind
of
mimic
what
I've
done
already,
and
so
I
I
made
an
adjustment
to
the
no
local
copies
message,
because
for
me
you
know
text
just
bleeds
together,
even
if
it's
colored
it
just
bleeds
together,
and
I
wanted
to
to
make
certain
things
stand
out
a
little
bit
differently.
So
right,
I'm
taking
advantage
of
something
in
bootstrap
called
labels.
A
B
A
Yeah,
and
in
fact
I
have
an
example-
here-
are
opec.
I
use
this
for
our
statuses,
so
the
statuses
show
differently,
depending
on
the
different
status
and
and
here's
an
example
where
the
badges
were
used.
Usually
these
numbers
show
up
in
parentheses.
Right
I
mean
those
stand
out
a
little
bit
more
as
well.
A
A
So
what
I
did
in
jason's
code
in
the
section
where
it's
talking
about,
if
it's
owned
local,
what
he
did
is
he
applied
a
style.
He
applied
a
color
and
a
weight
to
the
text
for
that
message.
That
says
no
local
copies,
so
in
essence,
he's
turned
it
red
and
made
it
bold,
and
so
what
I've
done,
which
I
will
do
here,
is
I'm
going
to
actually
see
here.
So
I'm
finding
that
section
right
here,
so
I'm
getting
rid
of
this
style.
A
And
if
you
want
this
style,
if
you
just
want
to
keep
it,
as
is
that's,
that's
totally
fine
but,
like
I
said,
I'm,
I'm
matching
some
some
things
that
I've
done
to
our
site
already
and
so
you're,
replacing
that
style
with
classes
that
are
part
of
bootstrap,
and
so
what
I've
got
here
in
this
case
is
I'm
telling
it
that
I
want
this
to
be
a
label
and
label
danger
a
second
class.
That's
added
defines
how
that
label
looks
and
what
color
it's
going
to
be.
So
it's
making
it
a
red
color.
A
B
A
A
You
know,
and
this
this
is
it's
good-
that
they've
updated
the
opec
I
wish
they
had
updated
the
staff
site
at
the
same
time.
I
like
it
when
both
sides
are
the
same,
because
I
don't
have
to
to
do
things
differently,
but
because
we're
using
different
version
of
bootstrap
on
the
staff,
side
and
opec.
It
makes
a
little
bit
more
work
because
I
have
to
code
it
a
little
bit
differently
on
each
side
and
you
have
to
remember
which
one
yep
yes
very
important,
so
yeah
anyways,
that
is
it.
B
A
Yeah,
in
fact,
I
know
that,
as
of
this
recording,
the
there
were
two
significant
things
that
we
ran
into.
We
ran
into
this
particular
issue,
changing
so
that
you
know
the
selectors
changed
a
little
bit
right
on
the
results
page.
So
that's
why
this
particular
enhancement
broken
and
we've
got
an
update
for
it.
The
second
thing
that
we
ran
into
for
2111
was
that
cover
flow
stopped,
working
cover
flow
broke,
and
so
there's
an
update
for
that,
and
I
had
asked
bywater,
who
is
our
vendor?
I
asked
bywater.